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

[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’);
}

[Tom]

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.

[Author]

Posts