1. Home
  2. Docs
  3. Theme Settings
  4. How to change the font style, font size and line height

How to change the font style, font size and line height

Go to your WordPress Dashboard under “Appearance-> Customize-> Attesa Theme Options-> Typography Settings“.

In this section you can choose the family font for heading and text, the font size for many website sections, the line height and the font weight for titles.

You can choose to use fonts from Google Fonts, or decide to use standard fonts if you want to reduce the number of requests to external resources.

How to add new Google Fonts using the child theme

If you plan to add new Google Fonts that are not on the list, you can do it very easily using the child theme.

Here is an example of a filter to add new Google Fonts for heading:

add_filter('attesa_google_fonts_heading_register', 'attesa_add_additional_google_fonts_heading');
function attesa_add_additional_google_fonts_heading($headingFonts) {
	$newFonts = array (
		'Noto Sans HK : sans-serif' => esc_html__( 'Noto Sans HK', 'attesa-child'),
		'B612 Mono : monospace' => esc_html__( 'B612 Mono', 'attesa-child'),
		'Teko : sans-serif' => esc_html__( 'Teko', 'attesa-child'),
	);
	return array_merge($headingFonts,$newFonts);
}

In this example, the filter will add three new Google Fonts for headings (Noto Sans HK, B612 Mono and Teko)

This filter will instead add new Google fonts for the text:

add_filter('attesa_google_fonts_text_register', 'attesa_add_additional_google_fonts_text');
function attesa_add_additional_google_fonts_text($textFonts) {
	$newFonts = array (
		'Noto Sans HK : sans-serif' => esc_html__( 'Noto Sans HK', 'attesa-child'),
		'B612 Mono : monospace' => esc_html__( 'B612 Mono', 'attesa-child'),
		'Teko : sans-serif' => esc_html__( 'Teko', 'attesa-child'),
	);
	return array_merge($textFonts,$newFonts);
}

Add these filters in the “functions.php” file of the child theme and the new Google Fonts will appear in the list of fonts available in the customizer.

Go to the official Google Fonts page to have a look at the available fonts.