migu migu - 1 year ago 86
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


Then in
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download