Using Google Fonts with Brunch Pro Classic

We highly recommend using the System Fonts setting in the Feast Plugin to optimize your site for pagespeed and core web vitals

Note: the built-in Google Font selector is outdated and does not reflect modern web best-practices: https://developers.google.com/web/updates/2016/02/font-display

For added flexibility, we have included 12 of our favorite Google webfonts in the customizer options:

You can set any of these typefaces to work for your body, accent fonts, headings, menu, and buttons.

Sometimes you already have a font in mind that works for your brand, though.  And I get that.  To override the Customizer settings (the typography panel of the customizer will be disabled) and use your own Google webfont, place the following snippet at the bottom of the code snippets plugin:

	 //* Load Google Fonts 
	add_filter( 'brunch_pro_disable_google_fonts', '__return_true' ); 
	add_action( 'wp_enqueue_scripts', 'dear_enqueue_syles' );
function dear_enqueue_syles() {
	 wp_enqueue_style( 'brunch-pro-google-fonts', '//fonts.googleapis.com/css?family=Droid+Serif:300,400,700|Open+Sans:300,400', array(), brunch_pro_THEME_VERSION );
}

Replace Droid Serif and Open Sans with the fonts that you want to use (correct codes can be found at google.com/fonts).  Then, you can easily change your stylesheet to use your selected fonts.

Best Practices

Each font that you include from a third party source (eg. fonts.google.com) increases page load times, which can hurt your user experience and search engine rankings. We recommend using no more than 1 external custom font, and ensuring the fonts are loaded with async/defer.