Question

I have just installed a custom WordPress theme (this is my first time working with WordPress, so I’m still learning a lot) and I need to make the font of the blog match the font for the rest of the web site, which is a Google Web Font.

I went to the custom theme’s stylesheet editor in the WordPress Dashboard and added the font via @import. So it currently looks like this:

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/

@import url("http://fonts.googleapis.com/css?family=Questrial:700,400");

body { font-family: Questrial, sans-serif; }

But that didn’t change the font in the blog. Am I not implementing the web font correctly? Is there some better/other way to do what I’m trying to accomplish?

Thanks for anyone’s help!

Answer 1

Well, it looks like you are implementing the font correctly.

Try using a tool like Firebug for Firefox or Google Chrome’s built in developer tools to see if the HTTP Request is coming back OK from the Google Fonts server.

If it’s properly loading the CSS file, your problem may lie within CSS inheritance. Because of the ‘Cascading’ part of the Cascading Style Sheets, there may be a rule that is higher on the list of importance. You’ll just have to hunt through and find it. Again you can use Firebug or Chrome developer tools for this as well.

The most simple solution may be simply adding an font-family: Questrial, sans-serif !important;