WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Custom CSS Not Importing Google Fonts API (10 posts)

  1. cozbaldwin
    Member
    Posted 1 year ago #

    I can see the plugin is saving the import line in the css, but it's not actually importing it. Should this be happening?

    What I'm importing is actually Google fonts api.

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

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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;
    }
  3. cozbaldwin
    Member
    Posted 1 year ago #

    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()...

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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?

  5. cozbaldwin
    Member
    Posted 1 year ago #

    http://www.hiddeninthesand.com/

    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.

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:

    http://i.wpne.ws/LVRz

    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.

  7. cozbaldwin
    Member
    Posted 1 year ago #

    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. :)

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Could you try to import the font like so:

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

    That should work!

  9. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    And @cfinke fixed the bug your reported in this changeset:
    http://plugins.trac.wordpress.org/changeset/637128

    The fix will be available in the next Jetpack release.

  10. cozbaldwin
    Member
    Posted 1 year ago #

    Yes that worked. Thanks! Have a good day.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic