Grow your CSS skills. Land your dream job.

@font-face problem on mobile

  • # December 11, 2012 at 7:30 am

    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!

    # December 11, 2012 at 7:39 am

    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.

    # December 11, 2012 at 7:56 am

    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!

    # December 11, 2012 at 9:44 am

    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.

    # December 11, 2012 at 11:21 am

    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](http://www.pctechauthority.com/embedding-fonts-in-web-pages.html “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.

    # December 11, 2012 at 11:29 am

    @djdaniel150

    @import

    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.

    # December 11, 2012 at 11:40 am

    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

    # December 11, 2012 at 11:57 am

    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”.

    # December 11, 2012 at 12:01 pm

    @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.

    # December 11, 2012 at 12:02 pm

    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.

    # December 11, 2012 at 1:22 pm

    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.

    # December 11, 2012 at 1:31 pm

    @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.

    # December 11, 2012 at 1:45 pm

    @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. =)

    # December 11, 2012 at 2:08 pm

    Did someone delete my comment?

    # December 11, 2012 at 2:09 pm

    Not me…

Viewing 15 posts - 1 through 15 (of 40 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".