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

}

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.

• https://madebycircular.com.au/wp-content/themes/savoy-child/style.css?ver=5.4.1