Google Fonts Not Working

Community Forums Forums Design Tips and Tricks Google Fonts Not Working

This topic is: not resolved

This topic contains 8 replies, has 5 voices, and was last updated by  tjoudeh 3 months, 1 week ago.

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

    PrayersNApples
    Member
    Post count: 35

    I followed the instructions for uploading Google fonts (here) but when I try to change my body font, it doesn’t work.

    I’ve changed my style.css to look like this:

    /* Import Fonts
    ------------------------------------------------------------ */
    
    @import url(http://fonts.googleapis.com/css?family=Oswald);
    @import url(http://fonts.googleapis.com/css?family=Sofia);
    @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
    @import url(http://fonts.googleapis.com/css?family=Cherry+Swash);
    @import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
    
    /* Defaults
    ------------------------------------------------------------ */
    
    body {
    	background: url(http://prayersandapples.com/wp-content/uploads/2013/12/White.jpg) repeat-x;
    	color: #605f5f;
    	font-family: 'Roboto Slab', serif;
    	font-size: 16px;
    	font-weight: 300;
    	line-height: 1.5625;
    	margin: 0;
    	padding: 0;
    	text-decoration: none;
    }

    And I’ve edited my CSS stylesheet (directly in the WordPress dashboard) to look like this:

    body {
    	font-family: 'Roboto Slab', serif;
    	font-size: 16px;
    	font-weight: 300;
    }

    Any suggestions? (Thanks in advance!)

    http://www.prayersandapples.com
    #81496

    PrayersNApples
    Member
    Post count: 35

    Not sure if it helps if I’m more specific, but I’m trying to get the font (Roboto Slab, serif) from Minimum Pro (http://my.studiopress.com/themes/minimum/#demo-full) onto the main text areas (i.e., blog post content) of my Adorable theme (http://prettydarncute.com/demos/adorable/).

    #81497

    emasai
    Participant
    Post count: 472

    You might also need to modify the font callout in the functions file.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #81562

    PrayersNApples
    Member
    Post count: 35

    @emasai: thank you for your suggestion! Unfortunately, I’m still not having too much luck :/ I was able to get the font to change – but something’s not right, because it doesn’t look the same as the Minimum Pro demo site. I followed the instructions on Brian Gardner’s tutorial: http://www.studiopress.com/tips/google-web-fonts.htm but the font on my website looks smaller. (I’ve since changed it back because I was worried I was messing with too many things and needed to wait until someone told me how to do it correctly!) I tried to leave my question on that tutorial, but for some reason it won’t let me? I also emailed support, but they said they don’t have access to the exact coding I would need to copy/paste and suggested I ask for help on the forum.

    If anyone could help me figure out how to get the main font on the Adorable theme to look exactly like the font on Minimum Pro, I would really appreciate it! Thanks so much!

    #81569

    braddalton
    Participant
    Post count: 7458

    This is the correct way to add Google fonts in WordPress in your child themes functions.php file.

    //* Enqueue scripts
    add_action( 'wp_enqueue_scripts', 'minimum_enqueue_scripts' );
    function minimum_enqueue_scripts() {
    
    	wp_enqueue_style( 'minimum-google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Roboto+Slab:300,400', array(), CHILD_THEME_VERSION );
    
    }
    

    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #83866

    Elaine Griffin
    Participant
    Post count: 76

    Brad, if you want to add more than one font, do you put them on the same line and separate with a comma, or do you enqueue each script separately?
    Thanks!
    Elaine

    #83919

    braddalton
    Participant
    Post count: 7458

    Either way works.

    When you select them on Google web fonts, you add them and then grab the code which includes all fonts, or you can do them separately.


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #90600

    tjoudeh
    Member
    Post count: 3

    Thank you Brad for your explanation, but for a reason google font is not working on my theme (eleven40 pro), I did everything but the font won’t update.

    It will be great if you were able to take a look on my blog and let me know if I’m missing something.
    http://66.147.244.100/~bitoftec/

    #90602

    tjoudeh
    Member
    Post count: 3

    Thanks for your explanation, but for a reason google font is not working on my theme (eleven40 pro), I did everything and used the new way which modifies the functions.php page but the font won’t update.

    Will be great if you were able to take a look on my blog and let me know if I’m missing something.
    http://66.147.244.100/~bitoftec/

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

You must be logged in to reply to this topic.