css font family not appearing?

Question

I've ran into an issue with font-family; basically I'm doing all the right things (I hope) yet for some reason the font is doing some weird things. So let me explain the issue..

On my browser the font appears OK in chrome/IE yet it doesn't appear in mozilla. On my dad's laptop, the font doesn't appear what-so-ever in any browser. On my mates apple mac, the font appears in Safari but not in chrome. On iPhone the font appears. On Nexus 4 the font doesn't appear (in Chrome or Mozilla)

This is why I'm confused; Why is it appearing in some browsers on different platforms and not on the others? Can a font be specific to an OS?

Here's the CSS i'm using.

@font-face {
font-family: "Pixelated";
src: url('templates/joostrap/fonts/pixelated.ttf');
}

This is how i'm applying it.

{font-family: "Pixelated"; text-transform: uppercase;}

Any help would be appreciated! cheers!

possible duplicate of [safari and ie can't read ttf eot fonts](http://stackoverflow.com/questions/14889045/safari-and-ie-cant-read-ttf-eot-fonts) — cbr, Sep 01 '13 at 09:27

score 1 · Answer 1 · answered Nov 09 '15 at 20:57

The most common problem with fonts not showing up is that the path was not properly specified. This happens more when you have multiple file fonts such as: light, bold, medium. So perhaps your path is

src: url('templates/joostrap/fonts/pixelated.ttf');

But if multiple versions are in one directory, it could be

src: url('templates/joostrap/fonts/pixelated/pixelated.ttf');

This happened to me before. In my case I had the fonts.css in my CSS directory, then i had the fonts in assets and the variations of the fonts were in the same directory. In my case I had to implement the Across the Road font. So based on my directory structure I did

@font-face {
    font-family: 'across_the_roadregular';
    src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot');
    src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/across_the_road/across_the_road-webfont.woff2') format('woff2'),
         url('../assets/fonts/across_the_road/across_the_road-webfont.woff') format('woff'),
         url('../assets/fonts/across_the_road/across_the_road-webfont.ttf') format('truetype'),
         url('../assets/fonts/across_the_road/across_the_road-webfont.svg#across_the_roadregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Notice that I specified various file types. This is because not all browsers can display the .ttf format. You can see compatability at http://caniuse.com/#feat=ttf

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

TTF fonts must be used differently when using in Chrome and Firefox. Check this link to setup the TTF correctly:

ttf files not rendering on Chrome and Firefox

edited May 23 '17 at 12:33

Community

1
1

answered Sep 01 '13 at 09:23

user2339071

4,254
1
27
46

Ahh, will try this now and get back to you, I renamed the font as well and by the looks of that post you're not allowed to otherwise it wont render correctly. Cheers! – Andrew Matthew Sep 01 '13 at 09:26

score 0 · Answer 3 · answered Sep 01 '13 at 09:26

The problem is that you're only using a .ttf file. Not every browser will be able to load it. Instead you should use a generator (link) so you have a .eot and a .woff file aswell.

Your font CSS will look like this:

@font-face {
  font-family: 'Pixelated';
  src: url('../fonts/pixelated.eot');
  src: url('../fonts/pixelated.eot?#iefix') format('embedded-opentype'),
       url('../fonts/pixelated.woff') format('woff'),
       url('../fonts/pixelated.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Hope this helped.

Hmm, my font is apparently 'corrupt' so i'm unable to use the generator.. Always handy! — Andrew Matthew, Sep 01 '13 at 09:31

score 0 · Answer 4 · answered Sep 01 '13 at 09:30

Specify a font named "myFirstFont", and specify the URL where it can be found

 @font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

Include a font file somewhere on your server, and refer to it with CSS

src: url('Sansation_Light.ttf')

If the font file is located at a different domain, use a full URL instead

src: url('http://www.w3schools.com/css3/Sansation_Light.ttf')

I think this link helps you http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

css font family not appearing?

4 Answers4

Linked