Custom font on Wordpress not working

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

您必须在functions.php中链接该字体，就像这样 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');
}