[resolved] Installing custom fonts from Google Web Fonts (8 posts)

  1. ishmaeldaro
    Posted 5 years ago #

    I've tried to install a custom font from Google's web fonts directory but it's not showing everywhere.

    I placed the CSS in "custom styles" under Blog Features.

    I placed the code that loads the font in header.php within the <head> tag as instructed, but my fancy new font only shows up within posts. It's the <h1> tag I've changed, so titles look awesome now in the post but on category pages they look the same as they used to.

    This is the code in question:
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

    Is there a better location to place the code? Has anyone else played around with custom fonts on Suffusion?

    Any tips would be appreciated.

  2. Sayontan Sinha
    Posted 5 years ago #

    I do custom fonts on my site: http://mynethome.net/blog, but that has been implemented using @font-face.

    A link to your site might help. Rather than put your code in header.php, you should really just put this Blog Features → Custom Includes → First Additional Stylesheet link:

  3. ishmaeldaro
    Posted 5 years ago #


    Thanks for the response. The site is here.

    I placed the link in the field you noted but unfortunately the titles on category pages are still showing in the default style, although posts still show in Ubuntu. (I have since removed the code from header.php.)

    Example category page: link
    Example post page: link

    If there is no easy solution to this, it's not a huge deal. I just thought it would look cool. Thanks for all your work on Suffusion, Sayontan.

  4. Sayontan Sinha
    Posted 5 years ago #

    The solution is quite easy, actually. The custom style you have added just sets the style for h1. You might want to set the font for the class ".posttitle" instead:
    .posttitle { font-family: 'Ubuntu', arial, serif; }

  5. ishmaeldaro
    Posted 5 years ago #

    Wow. That was really easy. I guess that just shows my unfamiliarity with CSS.

    Thanks so much for the help. You rock!

  6. Colwell7
    Posted 5 years ago #

    I have been using this plugin here to add Google's web fonts to my sites:
    Google Web Fonts for WordPress

    Its pretty slick, its got 220 fonts built in with one click setup and custom CSS rules for size, color, variant, weight etc. Deff a must have!

  7. roybatty88
    Posted 4 years ago #


    Go to google fonts site
    choose your font and note the right code of choosen font then in suffusion theme open file fonts.php in function folder and edit code like below (the styles depends on the family), It could be 1 (normal), 2 (normal and bold) or more, to see all of theme put it in the array:

    'gudea' => array(
    'family' => 'Gudea',
    'weight' => array(
    400 => 'Normal',
    '400italic' => 'Normal italic',
    700 => 'Bold',
    'class' => 'serif',


  8. mebox
    Posted 4 years ago #

    Brothers, I suggest you to use the plugin ' WP CUFON ' , which is very flexible and easy to use .

    Follow this link to download and further info .

    Also @font-face method works with some themes ( ex. works perfectly with Twenty Eleven theme ) .

    Mebox .

Topic Closed

This topic has been closed to new replies.

About this Topic