Installing custom fonts from Google Web Fonts

  • Resolved ishmaeldaro

    (@ishmaeldaro)


    14 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='https://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.

Viewing 7 replies - 1 through 7 (of 7 total)

  • I do custom fonts on my site: https://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:
    https://fonts.googleapis.com/css?family=Ubuntu

    Thread Starter ishmaeldaro

    (@ishmaeldaro)

    Sayontan,

    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.

    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; }

    Thread Starter ishmaeldaro

    (@ishmaeldaro)

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

    Thanks so much for the help. You rock!

    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!

    Hi

    Go to google fonts site
    https://www.google.com/webfonts#ChoosePlace:select
    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’,
    ),

    roybatty

    mebox

    (@mebox)

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

    Thanks,
    Mebox .

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Installing custom fonts from Google Web Fonts’ is closed to new replies.

Tags