Search code examples
htmlcsswordpressfontsfont-face

@font-face won't display custom fonts in WordPress

I am attempting to add custom fonts to a WordPress site and I cannot get the correct font to display. I am able to get the custom font to display locally on an HTML and CSS document I whipped up real quick and also by using the web developer tools in Firefox, so I know the font is loading. The font is called "Indubitably", I downloaded it from Font Squirrel and I am specifically testing with the .woff format.

Here is my code:

@font-face {
    font-family: 'indubitably';
    src: url('fonts/INDUBITA-webfont.woff');
}

h1, h2, h3, h4, h5, h6 {
    color: black !important;
    font-family: 'indubitably' !important;
}

I think I've uploaded the font to the correct directory, which is /home/"myUsername"/html/wp-content/themes/hestia(my current theme)/fonts...

I've tried copying the code to style.css, I've used a plugin called Simple Custom CSS, I've also tried using the built-in WordPress CSS editor to no avail.

Sorry if this is a noob question, it is my first rodeo ;)

Solution

  • Try replacing the local path to your font with the complete URL, so change fonts/INDUBITA-webfont.woff to http://www.example.com/wp-content/themes/hestia/fonts/INDUBITA-webfont.woff (changing example.com to your correct domain, of course.