• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Outreach theme – Google fonts

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Outreach theme – Google fonts

This topic is: resolved

Tagged: google fonts, outreach

  • This topic has 4 replies, 2 voices, and was last updated 9 years, 2 months ago by Paul.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 12, 2013 at 5:29 pm #25750
    Paul
    Member

    So far I have not figured out exactly how to use Google fonts. I do see where Outreach is using a Google font called 'Lato'
    The site I am working on now would like to have the title of their site use the Gabriela font.

    What do I need to change in the style sheet to use this font just for the title?


    Grace and Peace,
    Paul

    March 12, 2013 at 9:10 pm #25772
    Brad Dalton
    Participant

    Line 197 of your child themes style.css file contains the CSS for your sites title:

    #title {
    	font-family: 'Lato', sans-serif;
    	font-size: 48px;
    	font-weight: normal;
    	line-height: 1;
    	margin: 35px 0 0;;
    	text-transform: uppercase;
    }
    

    Change the font family from Lato to Gabriela.

    Google fonts are loaded in your child themes functions.php file starting at line 17:

    /** Load Google fonts */
    add_action( 'wp_enqueue_scripts', 'outreach_load_google_fonts' );
    function outreach_load_google_fonts() {
        wp_enqueue_style( 
        	'google-fonts', 
        	'http://fonts.googleapis.com/css?family=Lato', 
        	array(), 
        	PARENT_THEME_VERSION 
        );
    }
    

    If its a Google font, add it here and then you can use it anywhere in your CSS there's a font-family property.

    Otherwise if its a font supported by all browsers you don't need to install it, just change the font-family value.

    If its a custom font, you'll need to install it first before changing your CSS code.


    2700 Genesis Tutorials

    March 13, 2013 at 7:34 am #25831
    Paul
    Member

    OK, so now I have this in the CSS:

    #title {
    font-family: 'Gabriela', sans-serif;
    font-size: 46px;
    font-weight: normal;
    line-height: 1;
    margin-top: 35px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: auto;
    text-transform: none;
    color: #a1f233;
    }

    And this in the function.php"
    /** Load Google fonts */
    add_action( 'wp_enqueue_scripts', 'outreach_load_google_fonts' );
    function outreach_load_google_fonts() {
    wp_enqueue_style(
    'google-fonts',
    'http://fonts.googleapis.com/css?family=Lato',
    'http://fonts.googleapis.com/css?family=Gabriela',
    array(),
    PARENT_THEME_VERSION
    );
    }

    But it didn't seem to change anything. Is there a different way I am supposed to add a 2nd Google font?


    Grace and Peace,
    Paul

    March 13, 2013 at 7:47 am #25835
    Brad Dalton
    Participant

    You can add them to your child themes style.css file:


    @import
    url(http://fonts.googleapis.com/css?family=Gabriela|Lato);

    Or try this in your child themes functions.php file:

    /** Load Google fonts */
    add_action( 'wp_enqueue_scripts', 'outreach_load_google_fonts' );
    function outreach_load_google_fonts() {
        wp_enqueue_style(
            'google-fonts',
            'http://fonts.googleapis.com/css?family=Gabriela|Lato',
            array(),
            PARENT_THEME_VERSION
        );
    }
    

    2700 Genesis Tutorials

    March 13, 2013 at 3:20 pm #26031
    Paul
    Member

    Thank you braddalton! Used the functions and putting the fonts together on same line did the trick. I figured I was doing it wrong by adding another line in.


    Grace and Peace,
    Paul

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Outreach theme – Google fonts’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble