Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Pomoc pśepytaś

Glědajśo se wobšudy pomocy. Njenapominajomy was nigda, telefonowy numer zawołaś, SMS pósłaś abo wósobinske informacije pśeraźiś. Pšosym dajśo suspektnu aktiwitu z pomocu nastajenja „Znjewužywanje k wěsći daś“ k wěsći.

Dalšne informacije

font not rendering in firefox, ok with other browsers

  • 8 wótegrona
  • 1 ma toś ten problem
  • 14 naglědow
  • Slědne wótegrono wót cor-el

more options

Hi there,

My custom font (avenir) displays fine in all other browsers except Firefox. My site is: https://madebycircular.com.au/

Here is my code:

@font-face {

 font-family: 'avenir-book';
 font-weight: normal;
 src: url('fonts/avenir-book/avenir-book.woff2') format('woff2'), /* Super Modern Browsers */
      url('fonts/avenir-book/avenir-book.woff') format('woff'), /* Pretty Modern Browsers */
      url('fonts/avenir-book/avenir-book.ttf')  format('truetype'), /* Safari, Android, iOS */

}

I can't figure out what is wrong.

Thanks Clare

Hi there, My custom font (avenir) displays fine in all other browsers except Firefox. My site is: https://madebycircular.com.au/ Here is my code: @font-face { font-family: 'avenir-book'; font-weight: normal; src: url('fonts/avenir-book/avenir-book.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/avenir-book/avenir-book.woff') format('woff'), /* Pretty Modern Browsers */ url('fonts/avenir-book/avenir-book.ttf') format('truetype'), /* Safari, Android, iOS */ } I can't figure out what is wrong. Thanks Clare

Wšykne wótegrona (8)

more options

What content on that page would be using this font and what is the full path to this font ?

The current Firefox Nightly build shows this error in the Web Console: Unknown descriptor ‘src: url('fonts/avenir-book/avenir-book.woff2') format('woff2'),url('fonts/avenir-book/avenir-book.woff') format('woff'),url('fonts/avenir-book/avenir-book.ttf')format('truetype'), ’ in @font-face rule. Skipped to next declaration.

You have a trailing comma instead of the closing semicolon (;) that seems to be causing this.

@font-face {
 font-family: 'avenir-book';
 font-weight: normal;
 src: url('fonts/avenir-book/avenir-book.woff2') format('woff2'),
 url('fonts/avenir-book/avenir-book.woff') format('woff'),
 url('fonts/avenir-book/avenir-book.ttf') format('truetype');
}
more options

OK.
That makes Firefox download the file, but there seems to be something wrong with the URL as I see a lot of 404 Not Found error in the console.
So there is more wrong.
What location do other browsers use to retrieve the file for this font family?

GET https://madebycircular.com.au/fonts/avenir-book/avenir-book.woff2
[HTTP/2 404 Not Found 1050ms]

downloadable font: download failed (font-family: "avenir-book" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: https://madebycircular.com.au/fonts/avenir-book/avenir-book.woff2
more options

so I've changed the code so it ends in an (;) but it still doesn't work in firefox.

the fonts are inside a folder in the child theme: child theme > fonts > avenir-book > fonts are in here. All browsers are using the same location. I'm not using Google fonts or Adobe fonts.

@font-face {

 font-family: 'avenir-book';
 font-weight: normal;
 src: url('fonts/avenir-book/avenir-book.eot'); /* IE9 Compat Modes */
 src: url('fonts/avenir-book/avenir-book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('fonts/avenir-book/avenir-book.woff2') format('woff2'), /* Super Modern Browsers */
      url('fonts/avenir-book/avenir-book.woff') format('woff'), /* Pretty Modern Browsers */
      url('fonts/avenir-book/avenir-book.ttf')  format('truetype'); /* Safari, Android, iOS */

}

body {

   font-family: 'avenir-book', Arial, Helvetica, sans-serif;

}

h1, h2, h3, h4, h5, h6 {

   font-family: 'avenir-book', Arial, Helvetica, sans-serif;

}

more options

You load this font via inline code, so Firefox looks for the files in the 'root' location where the main html file is located.
If the fonts are in a different location then you need to move the @font-face code to a file in the fonts parent location or provide the full path starting with the root (/xxx/fonts/...).

more options

ok, so I've done that....and no change :(

@font-face {

 font-family: 'avenir-book';
 font-weight: normal;
 src: url('/savoy-child/fonts/avenir-book/avenir-book.eot'); /* IE9 Compat Modes */
 src: url('/savoy-child/fonts/avenir-book/avenir-book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('/savoy-child/fonts/avenir-book/avenir-book.woff2') format('woff2'), /* Super Modern Browsers */
      url('/savoy-child/fonts/avenir-book/avenir-book.woff') format('woff'), /* Pretty Modern Browsers */
      url('/savoy-child/fonts/avenir-book/avenir-book.ttf')  format('truetype'); /* Safari, Android, iOS */

}

Wót claremc13 změnjony

more options

URL is still wrong, it should be https://madebycircular.com.au/wp-content/themes/savoy-child/fonts/avenir-book/avenir-book.woff2 . Check it in WWW Console.

As cor-el said, inline declaration should contain URL referencing a html file location or it won't work. So it's better to move the font declaration to a css file.

more options

Great thanks it works! I understand now. I didn't understand what cor-el meant.

What do you mean by - "it's better to move the font declaration to a css file?"

more options

If you would move the @font-face code to a CSS file in https://madebycircular.com.au/wp-content/themes/savoy-child/ then this should work because fonts is a sub directory of this file path.