Adding custom fonts (local) to WordPress?

I have this code:

@font-face {
    font-family: 'Miller Banner Light';
    src: url('fonts/Miller-Banner-Light-01.eot'); /* IE9 Compat Modes */
    src: url('fonts/Miller-Banner-Light-01.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/Miller-Banner-Light-01.woff') format('woff'), /* Pretty Modern Browsers */
    url('fonts/Miller-Banner-Light-01.ttf')  format('truetype') /* Safari, Android, iOS */
}

Which in theory allows to add these fonts to my theme, unfortunately, simply creating the fonts folder and putting in the files doesn’t work.

I read about having to create a child-theme but is that the only way?

2 Answers
2

I assume you have put the code somewhere in your current theme. The child theme avoids to lose your editing after theme updates. It is really much easier than it seems.

If you want to understand why your font isn’t loaded, you can look for 404 errors in your console log or try with the plugin Query Monitor, which show you all the fonts paths used in the current page.

Still, if you are not confident with loading your font programmatically and use a child theme, or for any other reason you want avoid that, then a plugin might be a solution for you. Use Any Font would does the job in this case.

Leave a Comment