Changing fonts in Mai Theme
If you’d like to change fonts (and colors) without using any code, you’ll love our Mai Styles plugin available in the Mai Theme Plugin Pack.
Like most Genesis child themes, changing fonts (the right way) requires a bit of code. There are 2 steps involved in using custom Google web fonts, registering your font with PHP and declaring your font with CSS.
This article will show you how to swap out Open Sans for Lato in Mai Lifestyle Theme. The same principles apply to add your own fonts, or to remove unused fonts.
Choosing Fonts
It’s usually best to choose 2 main fonts for a website, the “Headings” font and the “Body” font. You can certainly add more, but the more fonts you load the slower your website becomes, so be careful!
- Visit https://fonts.google.com/
- Choose the fonts you’d like to use.
- Hit the red + button to “Select this font”.
4. Customize your font by choosing the weights and styles you want to use.
Registering Fonts
Near the top of your theme’s customizations in functions.php
will be a block of code like this:
// Register custom Google fonts.
add_action( 'wp_enqueue_scripts', 'maitheme_enqueue_fonts' ); function maitheme_enqueue_fonts() {
wp_enqueue_style( 'maitheme-google-fonts', '//fonts.googleapis.com/css?family=Muli:200,200i|Open+Sans:300,300i,400,400i,700,700i|Playfair+Display:700,700i', array(), CHILD_THEME_VERSION );
}
The above code is from Mai Lifestyle Theme and registers the Google fonts used by the theme; Muli, Open Sans, and Playfair Display.
Fonts are registered after the //fonts.googleapis.com/css?family=
and each font family is separated by a |
.
To swap our fonts is as easy as replacing this:
Open+Sans:300,300i,400,400i,700,700i
with this:
Lato:400,400i,700
So the final, modified code will be this:
// Register custom Google fonts.
add_action( 'wp_enqueue_scripts', 'maitheme_enqueue_fonts' );
function maitheme_enqueue_fonts() {
wp_enqueue_style( 'maitheme-google-fonts', '//fonts.googleapis.com/css?family=Muli:200,200i|Lato:400,400i,700|Playfair+Display:700,700i', array(), CHILD_THEME_VERSION );
}
Declaring Fonts
Near the top of your theme’s style.css
file are the main font declarations.
In Mai Lifestyle Theme, the body font is declared like this:
body,
body.text-md {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
To change this font to Lato, just swap out the font-family (and possibly the font-weight) like this:
body,
body.text-md {
font-family: 'Lato', sans-serif;
font-weight: 400;
}
The same tweaks can happen for the various headings available as well.
Happy customizing!