Wordpress doesn't find my custom font

Question

@font-face {
    font-family: 'chunkfive';
    src: url('wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.woff2') format('woff2'),
         url('wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.woff') format('woff'),
         url('wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'chunkfive', 'Open Sans', Helvetica, Arial, sans-serif!important;
}

The font types are in a folder called 'fonts' in the root file of my theme.

I've added !important just incase Wordpress was overruling it.

According to Chrome devtools, the font-family command is recognised but Open Sans is chosen instead, so there must be a problem linking the fonts file, but I can't figure out what it is.

Many thanks.

Answer 1

I can assume there's a problem of absolute and relative paths. I suggest you to try using the absolute ones, that is to say adding the slash in front of the paths, in order to avoid mismatched URL:

@font-face {
    font-family: 'chunkfive';
    src: url('/wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.woff2') format('woff2'),
         url('/wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.woff') format('woff'),
         url('/wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'chunkfive', 'Open Sans', Helvetica, Arial, sans-serif!important;
}