Google Fonts Not Working

Community Forums Forums Design Tips and Tricks Google Fonts Not Working

This topic is: not resolved

This topic contains 11 replies, has 7 voices, and was last updated by  braddalton 1 month, 2 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 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: 669

    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: 9959

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

    [php]
    //* 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 );

    }
    [/php]


    #83866

    Elaine Griffin
    Participant
    Post count: 86

    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: 9959

    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.


    #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/

    #111551

    kevinburke2
    Participant
    Post count: 9

    I know this was from February, but I’m seemingly having the same problem as tjoudeh. I haven’t messed with any fonts. I’m using eleven40 pro right out of the box. The fonts are correct when using Safari on a Mac and iOS. But on IE on a PC, it’s all messed up – changes the fonts completely. Check out the header.

    In Safari on Mac:
    SAFARI-MAC

    In Internet Explorer on PC:
    IE-PC

    #119364

    schigk
    Participant
    Post count: 8

    Adding Open sans Google fonts to Enterprise Theme for the text (body) area. Website: http://www.matrixmarketinggroup.com/

    I’ve read everything about this and here’s what’s I’ve done. However, the fonts in not change.

    1. Add the code below to function.php (child theme), I’m trying to add Open sans Google fonts

    /* Enqueue Open san (light) Web Google fonts
    add_action( ‘wp_enqueue_scripts’, ‘enterprise_google_fonts’ );
    function enterprise_google_fonts() {

    wp_enqueue_style( ‘google-fonts’, ‘//fonts.googleapis.com/css?family=Open+Sans:300italic,300′, array(), CHILD_THEME_VERSION );

    }

    2. Here’s my css in the child theme

    textarea {
    color: #555;
    font-family: ‘Open-Sans’, Arial, Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    }

    input {
    color: #333;
    font-family: ‘Open Sans’, Arial, Helvetica, Tahoma, sans-serif;
    }

    #119369

    braddalton
    Participant
    Post count: 9959

    Your CSS is wrong

    Use this class for the widget

    .widget_text {
        color: blue;
        font-family: Open Sans;
    }
    

    Or this section I.D

    #text-4 {
        color: red;
        font-family: Open Sans;
    }
    

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

You must be logged in to reply to this topic.