[Resolved] add 2 or 3 custom google font

[lacoste]

Hi, I want to add 2 google font.
I read the article:
https://docs.generatepress.com/article/customizing-the-google-font-list/
and add php code blow.

Question:
There are only font name appear in theme Typography, but variants not show.
Screenshot:
https://www.dropbox.com/s/hcr01rsujldmlgk/2019-05-31_06-04-12.png?dl=0
What have I missed?

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'noto_sans_tc' ] = array( 
		'name' => 'Noto Sans TC',
		'variants' => array( '300', '500', '700' ),
		'category' => 'serif'
	);
	$fonts[ 'noto_serif_tc' ] = array( 
		'name' => 'Noto Serif TC',
		'variants' => array( '300', '500', '700' ),
		'category' => 'serif'
	);
	return $fonts;
}

[Tom]

This was a tough one! Looks like those fonts aren’t in our big list of Google Fonts, so variants weren’t being checked.

Try this instead:

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
add_filter( 'generate_google_fonts_array', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'noto_sans_tc' ] = array(
		'name' => 'Noto Sans TC',
		'variants' => array( '300', '500', '700' ),
		'category' => 'serif'
	);
	
	$fonts[ 'noto_serif_tc' ] = array(
		'name' => 'Noto Serif TC',
		'variants' => array( '300', '500', '700' ),
		'category' => 'serif'
	);

	return $fonts;
}

[lacoste]

Thank you for your quick and professional reply.
It works!

In addition,
How can I make Chinese google font work faster in generatepress theme?
Need any plugin or setting ?

[Tom]

I’m not too sure what you mean. How would we make it faster?

[lacoste]

Hi,
What I mean is that
Custom Chinese google fonts usually take up most of the website loading time.

How would we make is faster?

1. Using the ‘Cache Dynamic CSS’ or the other cache plugin.
Will it work on google font?

2. Some people said using the CSS3 font-display property ‘swap’.
font-display: swap
How I add this property in generatepress theme?

Thank you very much!

[Tom]

1. No, that wouldn’t do anything to Google Fonts.

2. This will be possible in the next version of the theme/plugin.

Perhaps loading the font locally will speed it up?: https://docs.generatepress.com/article/adding-local-fonts/

[Mathias]

We’re happy that we’ve found this snipped to add the font Caveat to our site, displayed for instance here with MyGoal Training Now I wanted to add Open Sans Condensed with the snipped and some CSS but all we get is either a serif font or if there is a fall back the standard font, which is Open Sans now.

This how we’ve tried:

Snippet

add_filter( ‘generate_typography_customize_list’, ‘tu_add_google_fonts’ );
function tu_add_google_fonts( $fonts ) {
$fonts[ ‘Caveat’ ] = array(
‘name’ => ‘Caveat’,
‘variants’ => array( ‘300’, ‘300i’, ‘400’, ‘400i’, ‘500’, ‘500i’, ‘600’, ‘600i’, ‘700’, ‘700i’ ),
‘category’ => ‘serif’
);

$fonts[ ‘open sans condensed’ ] = array(
‘name’ => ‘open sans condensed’,
‘variants’ => array( ‘300’, ‘500’, ‘700’ ),
‘category’ => ‘serif’
);

return $fonts;
}

CSS

.wp-caption-text {
font-family: Open Sans Condensed, Open Sans;
}

Please note, that we’ve added Open Sans as a fall back just because it does not work yet. If choosen in the customizer for H1-n or body text the condensed variant is displayed properly.

Did we miss something? Thank you in advance.

[Leo]

Any chance you can open a new topic for your question?

Thanks 🙂

[Mathias]

Yes Leo; I will do so.

[Leo]

Thanks 🙂

[Author]

Posts