Adding custom fonts (local) to WordPress?

Question

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?

Answer 1

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.

Answer 2

You have the right idea.

I recommend going to Google web font helper. There you can search for your font after you have downloaded the files from the google fonts site. Then put the different fonts into separate font folders under their correct font name. Then put those folders into a parent "fonts folder"

When you go to the helper site make sure to choose the same options you did before and be sure to type the correct file path in the text box area below the style sheet example. (ie. fonts/** )

After you've got all that in place just simply download the style sheet and put it in the "fonts folder" and label it fonts.css

That should give you the ability to refer to each font in your style.css file providing you use the right css. Some .css names for the fonts are a little tricky to guess but the correct names (like font-family: "Comfortaa, san-serif" ) can be found on either of the google site aforementioned.

Thanks and hope that helps!