Søg i Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

font not rendering in firefox, ok with other browsers

  • 8 svar
  • 1 har dette problem
  • 12 visninger
  • Seneste svar af 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

Alle svar (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');
}

Nyttig?

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

Nyttig?

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;

}

Nyttig?

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/...).

Nyttig?

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 */

}

Ændret af claremc13 den

Nyttig?

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.

Nyttig?

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?"

Nyttig?

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.

Nyttig?

Stil et spørgsmål

Du skal logge ind på din konto for at svare på et indlæg. Start et nyt spørgsmål, hvis du ikke har en konto endnu.