migu migu - 4 months ago 8
CSS Question

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.

Answer

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.