Hello everyone =)
I have a problem embedding the font in my website. http://www.andreasorrentino.eu/new/
I have three different fonts and I made 3 different css files with the code from font squirrel. After that I imported the three different css file in the main css file.
The problem is that this works ok on desktop browsers but I can't understand why It's not working on mobile browsers. On these one only the first declaration works, so it charge the first font declared and not the others.
Any solution? Thanks!
Hi @Paulie_D I have two font folders: one for the museo family and one for the League Gothic, I've checked and I have for each folder the following format 'eot', 'svg', 'ttf', 'woof'. Also the 'font' css files path is correct, and it works on desktop browers the problem is on mobile
Thanks for help!
If you have two font folders (something that does not show up in Web Inspector) then I would assume that you would need to have them linked differently in your CSS files...at the moment they all refer to a 'webfonts' folder.
I can't check it on mobile but if you say so...then it must be something else.
The problem is, I don't see where you actually declared your fonts! You used "@import" to point to them, without their names like this in your CSS:
"@import url('font.css');"
"@import url('font2.css');"
"@import url('font3.css');"
and your font name is:
League Gothic, not "font.css", etc.
You aren't declaring your fonts!
You first need to declare your font like this:
From the root of your external CSS file:
Where you see robotica is where you need to assign a name, any name you like to call your font. You will call your font later using the 'font-family: fontname;' (the name you assigned) and NOT the name of the font itself. Simply replace "Robotica.ttf" with your font (in this case your league gothic font).
Font names are case sensitive! "League Gothic.ttf", LeagueGothic.ttf", and "leaguegothic.ttf", are all completely different names.
Notice I declared my example font by pointing to a directory I created called ("embedded-fonts/name of font.whatever extension you are using");
Now you've declared your font, so you can simply call it with the "font-family: name.ttf;" etc, from any CSS selector you've defined.
I don't want to get into a mile long description, but what I just stated works, and here's a link to the full article:
learn how to embed fonts
There are other articles on here as well, although there ar many different ways that people seem to implement the embedding of fonts. You shouldn't be using the "@import" for sure.
Sure it would make more sense to just have a single CSS file and add all the fonts at the top but he hasn't. There may be issues about filenames & locations but, AFAICT, there is nothing wrong with the import itself.
I see the "@import" declarations embedded within the style sheet itself, not the HTML document. Fine I guess, but it should still be "@font-face". Also, chris is right, you better be careful with embedding fonts, are you sure they have an open license to use them? There are license free fonts around the web. Yeah, ditch the "@import" and stick with "@font-face".
@djdaniel150 I checked. He's good as long as he credits them in his CSS where he is declaring @font-face. I would just use Typekit or the webfont loader from Github.
Right, I have no idea why they're trying to link to the fonts with "@import?" Makes no sense. Thats just it, they aren't trying to link css files, they're trying to embed fonts, atleast that was the stated problem. I found @font-face no where in their corresponding css files. @import should be used to link to a stylesheet, not a font.
@Paulie_D
"Sure it would make more sense to just have a single CSS file and add all the fonts at the top but he hasn't"
Sure it has more sense and I did it! but when I saw that it did not load on mobile I swiched to the @import way.
Now I put all the fonts in one folder called webfonts as you suggested and I switched to the @font-face declaration in the main stylesheet. but the problem is not solved on mobile.
@chrisburton
I checked the license before to use and the fonts are ok to embedding, I wanted to credit them when I'll public the site. I did not know nothig about Tipekit.. so thanks! =) It will be helpful for the future but now I'm using 3 fonts and the free trial allows to use only 2 font, so it would not solve the problem. =) And thaks for the MIME article it's really good, I'm looking at it to solve the problem.
@djdaniel150 I think there is nothing wrong with the @import. I was just using it in the right way. Please look at http://www.w3.org/TR/CSS21/cascade.html#at-import
"The '@import' rule allows users to import style rules from other style sheets", so I did the right way. =)
So I believe the issue is that you are not linking to them correctly even with the "www" in the URL. But you should still force the non "www" to redirect to the "www"
@chrisburton yes you're right the service on wich I've the website do not support the non "www" so I'm making change to the DNS to correct this lack but it takes 12-24h to do this, so in the meanwhile I updated the links as you suggested with the "www" but it still don't work.
@sorrentandrea When linking correctly to the font files, I should be able to put that link in my browser's URL bar and it should download automatically to my computer. This isn't happening. I just get a 404 which tells me that the files are not linking to the actual files. I would like to see the folder structure on your server. Can you screenshot where on your server the files are?
Ok I'll let you know tomorrow because I don't have wi-fi and I need to go to university for this..
Really dont' know how to thank you! =)
And do you know what is the right way to give attribution to the font?
@chrisburton I opened the website on my ipod touch and the problem is still here.. the only font that doesn't charge is the League Gothic Condensed(about page), I'm thinking to use TipeKit for it.. what do you think? it's possible that it doesn't charge for "name problem"(League Gothic Condensed is an extension of League Gothic)?
@sorrentandrea Typekit would definitely solve the problem and maybe give you a higher quality output depending if they re-hinted. I'm still stuck as to why it isn't working. It could be a number of things.
The actual font-family: "Name"; doesn't matter as long as it's pointing to the correct file.
Hello everyone =) I have a problem embedding the font in my website. http://www.andreasorrentino.eu/new/ I have three different fonts and I made 3 different css files with the code from font squirrel. After that I imported the three different css file in the main css file. The problem is that this works ok on desktop browsers but I can't understand why It's not working on mobile browsers. On these one only the first declaration works, so it charge the first font declared and not the others. Any solution? Thanks!
You only seem to have one font (a WOFF) in your font folder.
You should have three plus multiple file formats for each.
Also, your 'font' css files refer to a webfonts folder which I can't see.
Hi @Paulie_D I have two font folders: one for the museo family and one for the League Gothic, I've checked and I have for each folder the following format 'eot', 'svg', 'ttf', 'woof'. Also the 'font' css files path is correct, and it works on desktop browers the problem is on mobile Thanks for help!
If you have two font folders (something that does not show up in Web Inspector) then I would assume that you would need to have them linked differently in your CSS files...at the moment they all refer to a 'webfonts' folder.
I can't check it on mobile but if you say so...then it must be something else.
The problem is, I don't see where you actually declared your fonts! You used "@import" to point to them, without their names like this in your CSS: "@import url('font.css');" "@import url('font2.css');" "@import url('font3.css');"
and your font name is: League Gothic, not "font.css", etc. You aren't declaring your fonts!
You first need to declare your font like this: From the root of your external CSS file:
@font-face {font-family: Robotica; src: url(“embedded-fonts/Robotica.ttf”); format(“true type”); }
Where you see robotica is where you need to assign a name, any name you like to call your font. You will call your font later using the 'font-family: fontname;' (the name you assigned) and NOT the name of the font itself. Simply replace "Robotica.ttf" with your font (in this case your league gothic font).
Font names are case sensitive! "League Gothic.ttf", LeagueGothic.ttf", and "leaguegothic.ttf", are all completely different names.
Notice I declared my example font by pointing to a directory I created called ("embedded-fonts/name of font.whatever extension you are using");
Now you've declared your font, so you can simply call it with the "font-family: name.ttf;" etc, from any CSS selector you've defined.
I don't want to get into a mile long description, but what I just stated works, and here's a link to the full article: learn how to embed fonts
There are other articles on here as well, although there ar many different ways that people seem to implement the embedding of fonts. You shouldn't be using the "@import" for sure.
@djdaniel150
works to import a CSS file into another one, as such, it would appear he's using them properly.
https://developer.mozilla.org/en-US/docs/CSS/@import
Sure it would make more sense to just have a single CSS file and add all the fonts at the top but he hasn't. There may be issues about filenames & locations but, AFAICT, there is nothing wrong with the import itself.
Why are you not using Typekit for this? As it stands you're breaking the EULA.
Lookat 4.b.IV of the license agreement. http://www.exljbris.com/eula.html
You may not have the correct MIME type set for webfonts. Take a look here: http://www.jbarker.com/blog/2009/mime-type-css-web-fonts
I see the "@import" declarations embedded within the style sheet itself, not the HTML document. Fine I guess, but it should still be "@font-face". Also, chris is right, you better be careful with embedding fonts, are you sure they have an open license to use them? There are license free fonts around the web. Yeah, ditch the "@import" and stick with "@font-face".
@djdaniel150 I checked. He's good as long as he credits them in his CSS where he is declaring @font-face. I would just use Typekit or the webfont loader from Github.
Sheesh....@fontface is used to declare the font it has nothing to do with linking css files.
He's declared the @fontface in each of the font.css files and is now trying to import them into his 'main' stylesheet.
Yes, he should just declare all of his @font-face statement in a single css file and do away with the import but he hasn't.
As I said, it looks like he's done the @import right but there are other issues which are causing breakage.
Right, I have no idea why they're trying to link to the fonts with "@import?" Makes no sense. Thats just it, they aren't trying to link css files, they're trying to embed fonts, atleast that was the stated problem. I found @font-face no where in their corresponding css files. @import should be used to link to a stylesheet, not a font.
@Paulie_D "Sure it would make more sense to just have a single CSS file and add all the fonts at the top but he hasn't" Sure it has more sense and I did it! but when I saw that it did not load on mobile I swiched to the @import way. Now I put all the fonts in one folder called webfonts as you suggested and I switched to the @font-face declaration in the main stylesheet. but the problem is not solved on mobile.
@chrisburton I checked the license before to use and the fonts are ok to embedding, I wanted to credit them when I'll public the site. I did not know nothig about Tipekit.. so thanks! =) It will be helpful for the future but now I'm using 3 fonts and the free trial allows to use only 2 font, so it would not solve the problem. =) And thaks for the MIME article it's really good, I'm looking at it to solve the problem.
@djdaniel150 I think there is nothing wrong with the @import. I was just using it in the right way. Please look at http://www.w3.org/TR/CSS21/cascade.html#at-import "The '@import' rule allows users to import style rules from other style sheets", so I did the right way. =)
Did someone delete my comment?
Not me...
not me =)
Anyway, @sorrentandrea. As long as your fonts are accessible on your server, they require attribution. Just wanted to let you know.
Any luck on the htaccess fix?
Just for testing purposes, can you edit your css files and put in the absolute URL's inside @font-face?
(e.g.)
@chrisburton I'll give attribution as soon as possible, thanks for the tip =)
I edited the css files with the absolute URL's but it's not working now, maybe it's a fault of mine, I don't know =(
I'm having some problem with the htaccess (I'm not good at it, so I'm learing the basic now =) )
@sorrentandrea I found that your site requires the "www". So in your css you need to add the following:
So I believe the issue is that you are not linking to them correctly even with the "www" in the URL. But you should still force the non "www" to redirect to the "www"
Do you have CPanel?
I know I must be missing something but I cannot find a folder called 'webfonts' via Chrome Inspector.
@Pauli_D Same here. Which is why I think it has to do with invalid links.
@chrisburton yes you're right the service on wich I've the website do not support the non "www" so I'm making change to the DNS to correct this lack but it takes 12-24h to do this, so in the meanwhile I updated the links as you suggested with the "www" but it still don't work.
Thanks guys you're amazing! =)
@sorrentandrea When linking correctly to the font files, I should be able to put that link in my browser's URL bar and it should download automatically to my computer. This isn't happening. I just get a 404 which tells me that the files are not linking to the actual files. I would like to see the folder structure on your server. Can you screenshot where on your server the files are?
@chrisburton sorry for my ignorance but I don't know how to add a screenshot to this discussion
@sorrentandrea Upload the image to http://tinypic.com and post the URL.
Here is the screenshot thanks for the patience chris [IMG]http://i47.tinypic.com/35hpvnt.png[/IMG]
@sorrentandrea Those are your CSS files. Where are the font files?
In the webfonts folder [IMG]http://i46.tinypic.com/21488qw.png[/IMG]
@sorrentandrea Okay. Right click on one of them and copy the link address. Then paste it here.
@sorrentandrea Ah ha! Nevermind. I found the correct URL.
Update your CSS @font-face to use the following URL:
http://www.andreasorrentino.eu/new/css/webfonts/webfont-file-name-goes-heree.g.
Changed and it works! =) the problem was that we were missing the "css" folder right? =) can I ask you why it should work on mobile with this URL?
Correct. You were linking to the file incorrectly.
It should work on mobile because you are now pointing correctly to the file and you're supporting svg .
Update: I just tested your site on my iPhone and it works.
Ok I'll let you know tomorrow because I don't have wi-fi and I need to go to university for this.. Really dont' know how to thank you! =) And do you know what is the right way to give attribution to the font?
Great!!! thanks chris! :D
@sorrentandrea In this css file: http://www.andreasorrentino.eu/new/css/style.css
Add the following at the top of the page:
Thanks one more time =)
@chrisburton I opened the website on my ipod touch and the problem is still here.. the only font that doesn't charge is the League Gothic Condensed(about page), I'm thinking to use TipeKit for it.. what do you think? it's possible that it doesn't charge for "name problem"(League Gothic Condensed is an extension of League Gothic)?
@sorrentandrea Typekit would definitely solve the problem and maybe give you a higher quality output depending if they re-hinted. I'm still stuck as to why it isn't working. It could be a number of things.
The actual
font-family: "Name";doesn't matter as long as it's pointing to the correct file.Hi chris I made yesterday an update to my ipod and now it display all the font in the correct way =)
Glad you have it worked out.