How to add additional Google font weights to existing fonts?

Support
#1

hello,
I would like to use google font Montserrat light on my website but X only supports the weight regular and bold.
The google montserrat font has 18 weights (including italic)

How do i add the other weights?

Thanks for your help.
Kind regards
Victor

#2

Hi there,

You can not add the additional weights to the Font Manager by default. You need to customize the theme by adding the code below to the functions.php file of your Child Theme:

/**
 * Enqueue scripts and styles.
 */

add_action( 'wp_enqueue_scripts', 'load_scripts' ); 
 
function load_scripts() {	
	wp_enqueue_style( 'fns-google-font', 'https://fonts.googleapis.com/css?family=Montserrat:200i,300,300i,400,500i,600,600i' );
}

The sample code above adds more weights, you can change the code to have the ones you like.

After that, you will need to use custom CSS to force the weight you like and you can not use the options available in different sections of the theme. For example, to change the weight of the h2 tag you will need to add the CSS code below to X > Launch > Options > CSS:

h2 {
    font-weight: 300;
}

Thank you.

#3

Thanks Christopher.

Montserrat is a popular font. How come only two font weights are supported while other have many more?

#4

Hi There,

Loading all the font-weights will slow your page loads, you can place the line of code below on top of your child theme’s style.css file if you need all the Montserrat font-weight.

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

Thanks,