Premium Themes: Change default font or add additional font from code

Our themes comes with Customizer options which allow you to change text and menu fonts:

but if you prefer, you can modify theme code to change the default selected font and/or add additional Google font. Here are necessary steps you need to perform:

Change Default Theme Font Name

1.The first step is to select a font from Google Fonts. We will use Roboto font as an example.

2. Then next step is to copy css import code for the font, i.e.

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');

3. Then open yourtheme/style.css and replace the font import css code with the new one:

4. Open yourtheme/inc/customizer.php

Find the following code

define('DEFAULT_FONT_NAME', 'something');

and replace it with with your new font name (not if font name contains ‘ ‘, it needs to be replaced with ‘+’):

define('DEFAULT_FONT_NAME', 'Open+Sans');

5. Save changes

Change Default Font Size

Some font looks better in different font sizes. So, you might want to change default font size as well. Here is how it can be done:

1.Open yourtheme/style.css

2. Find the following code:

body {
	...
	font-size:14px;

and replace it with new font size (i.e. 16px):

body {
	...
	font-size:16px;

3. Open yourtheme/inc/customizer.php and update font size value inside the following code:

define('BODY_FONT_SIZE', '14');

to:

define('BODY_FONT_SIZE', '16');

Apply Additional Font to Theme Element such as Slide Title

In addition to the above, you might want to apply a new font to a specific theme element i.e. a Slide Title. Here is how it can be done:

1. Open yourtheme/style.css

2. Insert css import code for the new font (somewhere at the beginning):

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700,700i,900&display=swap');

3. Apply css code which sets the new font to the element you want (it requires some css base skills to be able to apply the expected css selector):

.slider-content-container h1,
.slider-content-container h2 {
	font-weight: 900;
	font-family: 'Playfair Display', serif !important;
}