Using Google Fonts

  • Author
    Posts
  • #31743
    Nathanael

    I have come across a bug with trying to use Google fonts.

    I tried substituting the Tempera fonts for their exact Google font equivalent to try and speed my website load times a little. “Ubuntu”, “Yanone Kaffeestaz”, and “Droid Sans” all work fine as Google fonts, but “Open Sans Light” does not.

    I have tried to get “Open Sans Light” to load from the Google font library using “Open Sans Light”, “Open Sans:300” and “Open+Sans:300” none of these work, the values seem to be passed to the google fonts API OK as the css file that gets requested seems correct, but the font file still seems to be loaded from the file on my webserver and not from the Google font library, and the font weight seems to vary depending on which syntax I use to request the font.

    Also what is the “Elusive” font used for? Whether I use the inbuilt Tempera fonts or the Google font library it is downloaded from my webserver, but I have not selected to use “Elusive” as a font in any of the Tempera options.

    If you need any more details to help fix the issue let me know and I will do my best to help.

    Thanks
    Nathanael

    #31744
    JJ

    Are you sure you’re using the correct font names for Google Fonts? I don’t see a font named “Open Sans Light” when searching Google Fonts. There is a font named “Open Sans” and one named “Open Sans Condensed,” but no “Light.”

    The Elusive font is used for various icons around the theme. For instance: the 3 dashes that appear on the upper left on narrow screens (for expanding the navigation menu), the magnifying glass icon in the search form, the various icons used to denote different post types. The Elusive icons are generated using the :before pseudo-element in CSS3. You can find some examples in tempera/style.css and tempera/styles/style-mobile.css.

    #31807
    Nathanael

    I think that I’m using the correct name, the font is “Open Sans” and I’m trying to get it to use the Light or 300 font weight which is what the theme uses when using the built in fonts rather than those in the Google font library.

    In the documentation on the Google font library it says:

    The Google Fonts API provides the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,).

    #31831
    JJ

    Are you entering your fonts via the Tempera settings in your WordPress admin? If so, yes, entering “Open Sans:300” should work. I have been entering various Google fonts this way in both Tempera and Nirvana and haven’t had any problems.

    However, since Tempera already includes the Open Sans font, you may have to take the extra step of adding “font-weight: 300;” to your stylesheet for the elements to which you wish to apply this style.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Using Google Fonts’ is closed to new replies.