Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] Custom Fonts: How to add multiple fonts and how to limit the weights?

Home Forums Support [Support request] Custom Fonts: How to add multiple fonts and how to limit the weights?

Home Forums Support Custom Fonts: How to add multiple fonts and how to limit the weights?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #533261
    Michael

    Hi,

    I’m developing a new site that requires a Japanese typeface. Google provides a few options. For example: https://www.google.com/get/noto/. I chose “Noto Sans CJK JP”.

    In the Simple CSS plugin, I added the import from Google:

    @import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

    In the Code Snippets plugin, I added this per the GP docs:

    add_filter( ‘generate_typography_default_fonts’,’tu_add_system_fonts’ );
    function tu_add_system_fonts( $fonts ) {
    $fonts[] = ‘Noto Sans CJK JP’;
    return $fonts;
    }

    Here are my questions:

    1. How do I modify the snippet to add a second custom font? Or does that require an additional snippet?

    2. I don’t need every font weight of this huge typeface. In this case, how do I limit the weights to just those I need?

    ——————-

    /*
    * Noto Sans JP (japanese) http://www.google.com/fonts/earlyaccess
    */
    @font-face {
    font-family: ‘Noto Sans JP’;
    font-style: normal;
    font-weight: 100;
    src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff2) format(‘woff2’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff) format(‘woff’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.otf) format(‘opentype’);
    }
    @font-face {
    font-family: ‘Noto Sans JP’;
    font-style: normal;
    font-weight: 300;
    src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format(‘woff2’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format(‘woff’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format(‘opentype’);
    }

    @font-face {
    font-family: ‘Noto Sans JP’;
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format(‘woff2’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format(‘woff’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format(‘opentype’);
    }
    @font-face {
    font-family: ‘Noto Sans JP’;
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format(‘woff2’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format(‘woff’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format(‘opentype’);
    }
    @font-face {
    font-family: ‘Noto Sans JP’;
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format(‘woff2’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format(‘woff’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format(‘opentype’);
    }
    @font-face {
    font-family: ‘Noto Sans JP’;
    font-style: normal;
    font-weight: 900;
    src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format(‘woff2’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format(‘woff’),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format(‘opentype’);
    }

    GeneratePress 2.0.2
    GP Premium 1.6
    #534065
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You should be able to do this:

    add_filter( 'generate_typography_default_fonts', 'tu_add_system_fonts' );
    function tu_add_system_fonts( $fonts ) {
        $fonts[] = 'Noto Sans CJK JP';
        $fonts[] = 'Another one';
    
        return $fonts;
    }

    I believe you would have to limit the weights/variants within their API. For example, when you “build” a regular Google font, it allows you to choose the weights to include.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.