CODEWITHSUNDEEP
htmlcssfirefoxfonts
Javier Martinez
Javier Martinez

Reputation: 3

My font loads on Chrome but not in Firefox or any other mobile browser

I'm rebuilding my website and I'm using a font called 'KlartextMono-Light'. It loads on Chrome but not in Firefox (v45.0.2) or any other mobile browser. I've tried looking at a bunch of forums but the fixes I've seen haven't worked

I have a 'fonts.css' file in my css folder, this is the code:

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

I have a separate fonts folder with all those versions of the type.

My main 'style.css' calls for the font this way:

h1, h2, h3, h4, h5, h6, p{
  font-family: KlartextMono-Light;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

And the part of my html header that loads the fonts looks like this:

<!-- Fonts
------------------------------------------- -->
<link rel="stylesheet" href="css/fonts.css">

<!-- Css
------------------------------------------- -->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">

The fonts render perfectly on Chrome but they don't work on firefox or any of my mobile devices. What am I doing wrong?

Upvotes: 0

Views: 124

Answers (2)

Pato Salazar
Pato Salazar

Reputation: 1477

I think is because you are referring to your web font wrong...

in your css you are calling

font-family: "KlartextMono-Light"

When you font is actually called klartext_monolight

See what happens if you make that change

Upvotes: 1

user6428459
user6428459

Reputation:

Looks like you're using the wrong font name when you're calling the font-family property. When you declare the font, you call it klartext_monolight, but in your CSS, it's called KlartextMono-Light. Use the same name as the one you originally declared:

h1, h2, h3, h4, h5, h6 {
  font-family: 'klartext_monolight';
}

Upvotes: 1

Related Questions