![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
font not rendering in firefox, ok with other browsers
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
Tất cả các câu trả lời (8)
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'); }
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
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;
}
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/...).
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 */
}
Được chỉnh sửa bởi claremc13 vào
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.
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?"
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.