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?

  • You should set up a child theme to prevent file loss on theme update. Regarding your font issue I guess it might be a path problem. – Luckyfella Dec 18 '17 at 8:16
  • 2
    Your css expects the 'font' folder to be in the folder your css file exists. – Luckyfella Dec 18 '17 at 8:18

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.


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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.