change the google font in WordPress twenty sixteen

  • Hello. Help please, to change the google font in WordPress twenty sixteen.

    This is what I have done.

    1 / Set up a child theme in the themes folder twentysixteen-child

    2 / Added functions.php
    <?php
    function theme_enqueue_styles() {

    $parent_style = ‘parent-style’;

    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array( $parent_style )
    );
    }
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    ?>

    3 / Added style.css
    /*
    Theme Name: Twenty Sixteen Child
    Theme URI: https://example.com/twenty-sifteen-child/
    Description: Twenty Sixteen Child Theme
    Author: John Doe
    Author URI: https://example.com
    Template: twentysixteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: twenty-sixteen-child
    */

    Child theme is working and can be edited through appearance>editor

    NOTE for others trying, you need to be using the child theme you have created, or you will not see your edits, and like me will waste a load of time thinking ‘it doesn’t work’. It does! but in the child theme which is where you will work from now on.

    Because teentysixteen uses google fonts as standard, I would like to make an edit in my child theme functions.php to swap its original request for:

    <link href=’https://fonts.googleapis.com/css?family=Spicy+Rice|Lobster+Two’ rel=’stylesheet’ type=’text/css’>

    I know the above link is not how to express this, It just shows the fonts I want to use.

    The reason I would prefer to do it this way is because I notice the twenty sixteen theme, style.css has fall backs for translations. However I am not an expert and do value expert advice.

    Can this be done? Please can someone write the example.

    FYI I am developing this in MAMP on Mac.

    Best wishes Nick.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter nicallen

    (@nicallen)

    This is reference in twenty sixteen functions.php that I want to change in the above. Thankyou.

    function twentysixteen_fonts_url() {
    $fonts_url = ”;
    $fonts = array();
    $subsets = ‘latin,latin-ext’;

    /* translators: If there are characters in your language that are not supported by Merriweather, translate this to ‘off’. Do not translate into your own language. */
    if ( ‘off’ !== _x( ‘on’, ‘Merriweather font: on or off’, ‘twentysixteen’ ) ) {
    $fonts[] = ‘Merriweather:400,700,900,400italic,700italic,900italic’;
    }

    /* translators: If there are characters in your language that are not supported by Montserrat, translate this to ‘off’. Do not translate into your own language. */
    if ( ‘off’ !== _x( ‘on’, ‘Montserrat font: on or off’, ‘twentysixteen’ ) ) {
    $fonts[] = ‘Montserrat:400,700’;
    }

    /* translators: If there are characters in your language that are not supported by Inconsolata, translate this to ‘off’. Do not translate into your own language. */
    if ( ‘off’ !== _x( ‘on’, ‘Inconsolata font: on or off’, ‘twentysixteen’ ) ) {
    $fonts[] = ‘Inconsolata:400’;
    }

    if ( $fonts ) {
    $fonts_url = add_query_arg( array(
    ‘family’ => urlencode( implode( ‘|’, $fonts ) ),
    ‘subset’ => urlencode( $subsets ),
    ), ‘https://fonts.googleapis.com/css&#8217; );
    }

    return $fonts_url;
    }
    endif;

    Thread Starter nicallen

    (@nicallen)

    Hello again.

    I can’t get the the next stage to work. My functions.php edit in the child results in the php appearing in the masthead area. This is what I used. the complete new functions file;

    <?php
    function theme_enqueue_styles() {

    $parent_style = ‘parent-style’;

    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array( $parent_style )
    );
    }
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    ?>
    <?php
    function twentysixteen_fonts_url() {
    $fonts_url = ”;
    $fonts = array();
    $subsets = ‘latin,latin-ext’;

    /* translators: If there are characters in your language that are not supported by Spicy+Rice, translate this to ‘off’. Do not translate into your own language. */
    if ( ‘off’ !== _x( ‘on’, ‘Spicy+Rice font: on or off’, ‘twentysixteen’ ) ) {
    $fonts[] = ‘Spicy+Rice:400’;
    }

    if ( $fonts ) {
    $fonts_url = add_query_arg( array(
    ‘family’ => urlencode( implode( ‘|’, $fonts ) ),
    ‘subset’ => urlencode( $subsets ),
    ), ‘https://fonts.googleapis.com/css&#8217; );
    }

    return $fonts_url;
    }
    endif;

    K H

    (@katinkaspirituality)

    There is no way to use a font that isn’t already on the users computer, or in the Google font-directory. It’s just not possible.

    Assuming the Spicy Rice font is in the Google font directory, you can activate using it (as it were) by something like this in the CSS file of your child theme:

    body {font-family: ‘spicy rice’, sans-serif;}

    That way if the users pc can’t find spicy rice, it will fall back on a sans-serif font.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘change the google font in WordPress twenty sixteen’ is closed to new replies.