Support » Plugins and Hacks » [Resolved] Custom CSS Not Importing Google Fonts API

[Resolved] Custom CSS Not Importing Google Fonts API

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Jeremy Herve


    It’s important to add the Import code at the top of your custom stylesheet:

    @import "url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Boogaloo)";

    You should then be able to use the custom font on your site, like so:

    body {
    	font-family: 'Yanone Kaffeesatz', sans-serif;

    Oh, it’s definitely the first line. And I found that the plugin is smart enough to pull it to the top upon saving, if it wasn’t already there. But it’s there. However it doesn’t work.

    I’m not sure if it matters, but the plugin also adds an extra space after @import. Two spaces. Then it starts up with the double-quote, url()…

    Plugin Author Jeremy Herve


    I have tested it again on a test blog of mine, and it seems to work.

    Could you post a link to your site, so I can investigate further?


    The fonts in question should be affecting the page title (and post titles in blogs) and the widget titles. They are appearing to me now as basic cursive and basic sans-serif, respectively. Although I just inspected the elements and saw that they DO have google fonts attributed to them… they’re acting like they can’t fetch the google font and are defaulting.

    Plugin Author Jeremy Herve


    Thank you. It seems to be a bug with the CSS module. @import doesn’t seem to recognize absolute URLs, as you can see when looking at the resources loading on your site:


    I have warned our developers about the issue, and we will work on a fix. In the meantime, I am afraid you will have to import the font via your theme’s stylesheet.

    Ah hah, yes. Not a problem — I’m glad I was able to help uncover a bug, leading to a more excellent WordPress of the future. 🙂

    Plugin Author Jeremy Herve


    Could you try to import the font like so:

    @import "http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Boogaloo";

    That should work!

    Plugin Author Jeremy Herve


    And @cfinke fixed the bug your reported in this changeset:

    The fix will be available in the next Jetpack release.

    Yes that worked. Thanks! Have a good day.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Resolved] Custom CSS Not Importing Google Fonts API’ is closed to new replies.