Navigation
Archive / Modifying Google Fonts to URL call additional weights
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 27, 2016 at 8:58 am #1149636
    ira242
    Participant

    Hi there!

    Brand new user of this theme, and love it so far! I’ve searched the forums, but don’t see a clear answer on this.

    I am using 2 (or 3) google fonts, and they are being defined in X, in “Customizing -> Typography” under the body and header selects. These choices seem to build the <link> css meta call in the HTML <head>, as:
    `
    <link rel=’stylesheet’ id=’x-google-fonts-css’ href=’//fonts.googleapis.com/css?family=Open+Sans%3A300%2C300italic%2C700%2C700italic%7CMontserrat%3A400%7CLato%3A100&subset=latin%2Clatin-ext&ver=4.6.1′ type=’text/css’ media=’all’ />

    This is great for the selected weights. But the “Typography” settings are obviously Radio selects and not multiple Checkboxes.

    So… How can I append / modify / override the Google Fonts embed URL above in the <link>, so that I could include additional weights (eg:Open+Sans:100,300,700, etc)?

    Searching the forums for over an hour, I only see posts on Revolution + Punch Fonts, and modification to *some* function file, but not clear one which one.

    Thanks!

    August 27, 2016 at 11:01 am #1149728
    Lely
    Moderator

    Hi There,

    Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

    Then on your child theme’s style.css file, add the following code at the very first line:
    @import 'https://fonts.googleapis.com/css?family=Open+Sans:300,700';

    Note that there’s not 100, just light 300.

    Hope this helps.

    August 27, 2016 at 1:07 pm #1149818
    ira242
    Participant

    Hey there,

    Thanks for the reply! I did indeed already have a child-theme, so I will check this out.

    I was hoping there was a way to *replace* the X created <link> tag. Because, won’t this cause an extra unnecessary call to the “fonts.googleapis.com” server (hey, every KB counts).

    Cheers

    August 27, 2016 at 9:29 pm #1150115
    Rue Nel
    Moderator

    Hello There,

    If you want to replace or remove the said <link> style, please add the following code in your child theme’s functions.php file

    add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );

function remove_default_stylesheet() {
    wp_dequeue_style( 'x-google-fonts' );
}

    You can create your own function and enqueue your own style. For further details, please check out the codex:

    wp_enqueue_style()

    Hope this helps.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1149636 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>