Adding Google Font to Pro Template

Hi there - I’m trying to add the Google font “Spectral” to my Pro template…

I saw this post: https://theme.co/apex/forum/t/google-font-selector-in-text-editor/1594

But it was only for adding the CSS in each line that you want the custom font. If I want all of the heading text to be Spectral, how can I add the font so that it will work in the Fonts Manager?

Thanks!

Hi There,

Thank you for writing in, that guide you link is before the Font Manager has been developed.

Please utilize the Font Manager to define/load your Google Font.

Then navigate to Theme Options > Typography turn On the ENABLE FONT MANAGER option. Then under the HEADINGS FONT option select the font that you defined from the Font Manager.

Hope it helps,
Cheers!

Sorry I should’ve been more specific, the Google font that I want to use “Spectral” is not listed in the Font Manager. How can I add this Google Font?

Hi there,

You can load the font by adding this code in the functions.php file of the child theme:

/**
 * Enqueue scripts and styles.
 */

add_action( 'wp_enqueue_scripts', 'load_scripts' ); 
 
function load_scripts() {	

	wp_enqueue_style( 'spectral-google-font', 'https://fonts.googleapis.com/css?family=Spectral:300,400,500,700' );


}

Then you can assign the font to an element through CSS like this:

body {
    font-family: 'Spectral', serif;
}

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.