WordPress.org

Ready to get started?Download WordPress

Forums

WP Google Fonts
Noob need help (6 posts)

  1. steveb_77
    Member
    Posted 1 year ago #

    I just want to do 2 simple things and I cannot figure it out.

    1) Have the main text on the site ( articles etc ) be Roboto font.
    2) Have the headers, titles etc be Roboto Condensed.

    I setup the plugin, I just dont know what to do with the custom css.

    Any one?

    http://wordpress.org/extend/plugins/wp-google-fonts/

  2. JPecsenyicki
    Member
    Posted 1 year ago #

    Hi Steve,

    You might be able to get away without doing anything with the custom CSS (assuming you haven't changed fonts with your CSS previously).

    Once you've set up the plugin, click Settings > Google Fonts on your dashboard. Your screen should read, Select Fonts, followed by Font 1, Font 2, Font 3...

    For Font 1, choose Roboto, and for Option 2: Elements you want to assign this font to:, click All. Then click the blue button, Save All Fonts.

    At this point, open a new browser tab, and enter your blog URL to verify that Roboto is being applied to everything on the page.

    If all's well, then set up Font 2 on your dashboard. Choose Roboto Condensed, and for Option 2, assign the font to Headline 1 (h1 tags), Headline 2 (h2 tags) and Headline 3 (h3 tags).

    (Maybe even Headline 4-6 as well, depending how you want them to look.)

    Click the blue button, Save All Fonts, and you should be done.

    Hope this helps.

    -Joseph

  3. steveb_77
    Member
    Posted 1 year ago #

    Hi Joseph - I tried using the direction you gave but there are a few sections that the font is simply not changing. Any thoughts?

  4. JPecsenyicki
    Member
    Posted 1 year ago #

    OK Steve, sounds like you'll need custom CSS for those parts that aren't changing.

    Please leave a link to your blog here and try to describe as best you can what parts you'd like changed. That'll help us figure out what classes need to be targeted.

  5. steveb_77
    Member
    Posted 1 year ago #

    my site is http://www.androiddoes.net

    I essentially want the standard text throughout the site to be Roboto Normal 400, with the headers, titles etc being Roboto Bold 700.

    That's it :)

  6. JPecsenyicki
    Member
    Posted 1 year ago #

    OK. If you've got Google Chrome, please use it now. Log into your blog admin in one tab, and get the public blog in another.

    (Not to badmouth other browsers, but I find Google Chrome is very intuitive in CSS troubleshooting.)

    Position your pointer over some element you'd like changed, and right-click the mouse. It gives you a little menu. Choose Inspect Element.

    (Follow along by doing this for your post headline, [Giveaway] The Ultimate Google Nexus 7 Accessory Pack)

    A large window now shows up at the bottom of the screen. The left side shows the HTML element you were pointing at (probably the anchor tag for the title).

    The right side shows the CSS associated with that element and related elements. If you scroll down the CSS section, you'll notice a font-related rule:

    .post-loop h2 {
    font-family: ProcionoRegular,Georgia,serif;
    font-weight: normal;
    font-size: 1.2em;
    }

    Now you know the class to target (.post-loop h2).

    Go back to your dashboard and click Settings > Google Fonts.

    If, for example, you want this to be Roboto Condensed, click on Show Options beside this font. Now go to 3. Custom CSS (Optional) and type:

    .post-loop h2 {
    font-family: "Roboto Condensed", sans-serif;
    }

    Click Save All Fonts, and all your post headings should now be changed to Roboto Condensed. (You can verify that by refreshing your public blog page.)

    Repeat for any other elements you want to change.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic