I can't make the font face working

Started by Caliston, September 01, 2016, 01:27:16 PM

Previous topic - Next topic

Caliston

I can't make it to work.
I uploaded the font in my theme fonts folder, also in my css folder, also created fonts folder in my  root folder.
I uploded the font from my pc.
This is on top of the css file:
-------
@font-face {
            font-family: "Gothic";  <<-- This is the name I gave to the font, should it be something else?
            src: url("fonts/COPRGTL.TTF");  <<-- also tried ("/fonts/COPRGTL.TTF"); ("../fonts/COPRGTL.TTF"); ("COPRGTL.TTF")
}

and then later in the css for the main menu

#main_menu a {
            font-family: "Gothic", Verdana, sans-serif;
}
--------
I also tried the absolute path. Also tried with single ' and without any quotation marks.
I found other fonts in my theme folder and tried with them too. I am using chrome, also tried firefox.
What I am doing wrong? Do I have to change somethig else?

Kindred

I am betting that the src is wrong.  Try using a fully define, absolute URL instead...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Shambles

^yep

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Quotesrc   URL   Required. Defines the URL(s) where the font should be downloaded from

Gary

Actually, it doesn't need to be an absolute full URL. Relative ones work too (I only use relative URLs even for font sources) so the more likely possibility here is that the source is calling a font file that's turning up 404.
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

Matthew K.

I'm happy to help you. Can you give us the path that your CSS file is in, and your font files too?

Kindred

I know that it does not have to be an absolute URL, but I would guess that he is using the wrong relative URL... And an absolute would get around that
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Caliston

CSS path (the default of the theme, I used the default theme and only made changes in the css to make the look different)
/public_html/forum/Themes/default/css/index.css
/public_html /forum /Themes /default /fonts

Like I said in the first post I made a copy of the fonts in every folder, I made fonts folder in the public_html and uplouded them there too.
Reinstall the fonts again last night in all the formats; tried these absolute paths:
url("hxxp:www.imperialvision.tk/fonts/gothic.woff2 [nonactive]");    <<---Tried everything here - ttf/woff/woff2/otf
url("hxxp:www.imperialvision.tk/forum/Themes/default/fonts/gothic.woff2 [nonactive]");  <<----same here

I don't know why this nonactive is showing up in my post! :P

Kindred

well, first -- nonactive shows because you don't have enough posts yet. :P

second...  do you realize that neither IE nor safari support woff2?  and only recent versions of the other browsers do so....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Caliston

I said that I tried them all, this is just a fast copy paste thing. I tried all the formats, and they are all in my fonts folders.

Matthew K.

1. It's possible your browser is caching your CSS file.
2. Use something to generate all around browser compatible package of font files that you can try.

Grammy

I was thinking through this and wondering what the deal is (because I use my own fonts for a lot of site design stuff I do).  I've had problems in the past getting fonts to show up and what works for me is putting a call for the font in the head tags:

Something like
<link href='http://example.com/fonts/css?family=Zapfino' rel='stylesheet' type='text/css' />
(You'd have to echo that.)

And then the css (something like):

h2 { font-size:21px; line-height:36px; color:#bf96c7; font-weight:bold; font-family: 'Zapfino'; font-style:italic;}
(Of course, whatever your particular CSS and font is.)

It's worth a try, maybe?  Of course, you're using @font-face, so it's a bit different...




Caliston

@Grammy
This is too complicated for me, my coding knowledge is around the bare minimum:)

To all
Thanks, I will continue trying. This is bugging me for a month now, but I am patient and I will figure it out. The good thing is that it looks I am on the right track with the code.
Just one note - I tried to change the font almost everywhere and I noticed a slowdown in loading the text, so it seems the code is working but it fails to load the  desired font. I will continue working on that and I will let you know when I succeed.

Have a nice weekend all :)

Caliston

lol this is interesting
I tested it on another forum with the path to the files uploaded here and it worked  like a charm from the first try.
I will have to dig deeper in the smf and probably check if my host is causing this (have no idea if this can be happening).

Caliston

This was unexpected, but finally I did it and it makes no sense.
So what I did is deleted all my old fonts. Then I generated new ones though the squirrel site. then I put the again in all my fonts folder.
Trying to load them from my local host fonts folder and my theme fonts folder - did NOT WORK!
But the when I set the link to the font files in my css folder it worked from the first try. Although I have tried that before and it did not work, now it is perfect.
Thanks all :)

skb

Great. You can mark topic solved. Green Tick to the bottom left of your screen.

SMF 2.1.4 / TP 2.2.2

Advertisement: