Re: @font-face problem on mobile

[djdaniel150]

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.