Search code examples
csswordpressfonts

Custom font on Wordpress not working

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:

enter image description here

It only works if I have the font installed on my operating system.

Solution

  • 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.