Implementing Google Fonts

Community Forums Forums Design Tips and Tricks Implementing Google Fonts

This topic is: not resolved

Tagged: ,

This topic contains 8 replies, has 4 voices, and was last updated by  ellegaarddk 1 year, 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #15918

    mborger
    Participant
    Post count: 109

    Hello. I could use some assistance implementing some CSS (AgentPress 2). I want to change the fonts used for h1, h2, titles and such. I read both http://www.briangardner.com/google-font-combinations/ for ideas and http://www.studiopress.com/tips/google-web-fonts.htm but I get stuck on the implementation of the last step b/c I’m not a pro on the CSS syntax.

    Let’s say I want to change the font of the h1 to Lato and the bodytext to Helvetica Neue. I have the @import line in the style.css but I’ve tried unsuccessfully to attach fonts to the h1 and body sections.

    Can someone help, please? Thank you…

    #15936

    wpspeak
    Participant
    Post count: 117

    Can you provide a link to your website? I can tell exactly where to put it if your give me the link.


    #16012

    mborger
    Participant
    Post count: 109

    bigrockinvestments.com

    I see ‘h1′ 4 times in the style.css, sometimes just as a line item by itself without anything after it. I just don’t know what purpose that serves when “h1″ is the only text in the line, and how to use it to change the font assigned to the tag.

    Thank you.

    #16015

    mborger
    Participant
    Post count: 109

    Or perhaps I’m thinking of it the wrong way. Instead of having to change the font for each of the H tags individually, maybe I need to make a more global modification somewhere that assigns one font for all the headings throughout the site and assigns another font for regular body text.

    I really don’t know, but the more I’ve been reading on my own, the more I’m beginning to think that the H tags are by default JUST about font SIZE….. ?

    #16031

    Bill Murray
    Participant
    Post count: 575

    There’s no “by default” with respect to CSS, if you mean that outside the context of your child theme stylesheet.

    To use Helvetica Neue as your body font, you’d make a change around line 174 of your child theme stylesheet.

    Basically, your body font applies to your H1 etc tags until you change that, near line 2390 and 2410. In that sense, unless you change your body font, it applies to a wide range of things.

    Widgets, such as those on your home page, are different cases, because they’ll often over-ride the heading styles. For example, see near lines 2440 and 2494. If you want all of a certain heading to use the same font, everywhere, no matter where it’s used, you’ll have to search for all instances of that heading tag other than in the body declaration and change it in each of those instances. If you want a separate font for 1 heading type but not for others, that heading might need its own declaration separate from other heading styles.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #16186

    wpspeak
    Participant
    Post count: 117

    Well, looks for the word “font-family”

    For example (this is for H1 tag)


    /* Defaults */

    h1 {
    font-family: 'Lato', serif;
    }

    For Title:

    #title {
    font-family: 'Oswald', arial, serif;
    font-size: 48px;
    line-height: 48px;
    margin: 0 0 5px;
    text-transform: uppercase;

    }

    You just need to search for font-family to change the font of the H1, H2, Title etc. If there’s no font-family property, you can add your own.

    Cool?


    #16347

    mborger
    Participant
    Post count: 109

    Ok thanks. I think I get it now. I guess, in a nutshell, it’d be easier to say that I want to match the typography chosen in genesisframework.com onto my site bigrockinvestments.com . I just love the look — it’s so easy on the eyes. I want to make my posts and pages easier to read to hopefully encourage more user engagement.

    So does this mean that I need to look up each individual h tag (1, 2, 3, etc), title tag, body tag, etc in the css with Firebug on that site and match it in my own? This is where I start to trip over myself.

     

    #16348

    mborger
    Participant
    Post count: 109

    Or is there a place to change all the h and title fonts to be one font and the body text to be another?

    #16382

    ellegaarddk
    Participant
    Post count: 6

    If you’re redefining the CSS, then yes.

    This will set the font for all H’s:
    h1, h2, h3, h4, h5 {font-family: “My Fonttype”}

    But you have make sure, that it’s not defined somewhere further down the stylesheet. So you must delete any separate defined font-family for H1 or H2.


    Morten Ellegaard Larsen – Designer and solution finder, MRC Computer A/S | Noerresundby, Denmark

    “I ain’t no expert, I just know more…”

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

You must be logged in to reply to this topic.