Custom font on Wordpress not working - css

Question

I'm trying to figure out why my custom font is not loading on WordPress (MAMP, Mac, localhost).
The fonts are stored in wp-content/themes/twentysixteen/fonts/
Then in wp-content/themes/twentysixteen/style.css I have the following CSS:
#font-face {
font-family: "Averta-Regular";
src: font-url("./fonts/31907B_A_0.eot");
src: font-url("./fonts/31907B_A_0.eot?#iefix") format('embedded-opentype'), font-url("./fonts/31907B_A_0.woff2") format('woff2'), font-url("./fonts/31907B_A_0.woff") format('woff'), font-url("./fonts/31907B_A_0.ttf") format('truetype');
}
html {
font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
}
Chrome shows me this:
It only works if I have the font installed on my operating system.

Answer 1

Try changing font-url to url on lines 3 and 4 of your CSS. It looks like it just isn't recognizing the source of the custom fonts you're trying to load.

Answer 2

You have to link that font in functions.php
Like this
wp_enqueue_style( 'custom', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Roboto' );

Answer 3

Download a ttf font, one available for commercial use, visit https://1001fonts.com/free-fonts-for-commercial-use.html?page=1&items=10 paste a copy into your theme and use #font-face just as you've done above. Everything should work just fine. While I was developing on my local server, everything was working fine. On publishing into public_html, the font refused to load. Had to change to a ttf, you can also try other web fonts format but the ttf works just fine. Better still you can use the google fonts.

Answer 4

I encountered something similar when I was using this wordpress uncode child theme and uploading custom fonts.
I realised it was because I didn't end the second src attribute with a ;
#font-face{
font-family: 'Lato';
src: url('fonts/Lato.eot');
src: url('fonts/Lato.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato.woff') format('woff'),
url('fonts/Lato.ttf') format('truetype'),
url('fonts/Lato.otf') format('opentype'),
}
Once I replaced it, the fonts worked. Stupid mistake but hard to spot after you work for a couple of hours.
#font-face{
font-family: 'Lato';
src: url('fonts/Lato.eot');
src: url('fonts/Lato.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato.woff') format('woff'),
url('fonts/Lato.ttf') format('truetype'),
url('fonts/Lato.otf') format('opentype');
}