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
All Replies (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 */
}
Novain'i claremc13 t@
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.