How to add custom font in WordPress theme

[admin]

Hi All Customer,

In this tutorial we’ll help you add custom font (not Google font) in our theme.

Step 1: Upload your font to server or get the font url like this:

http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en

Step 2:

Use child theme to customize. All your customize work should use child theme like topic tutorial here:

How to customize WordPress theme using Child theme

Go to {your web root}/wp-content/themes/haru-circle-child/ then open file function.php

You should add the code like this:

function haru_enqueue_styles_custom() {
wp_enqueue_style( 'haru-theme-font-custom', 'http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en' );
}

add_action('wp_enqueue_scripts', 'haru_enqueue_styles_custom', 13);

Step 3:

Add custom CSS for theme in {your web root}/wp-content/themes/haru-circle-child/style.css

You can do similar with other element if needed.

Step 4: To make new font apply for all site you can go to {your web root}/wp-content/themes/haru-circle/assets/sass/paritial/ then open file _variable.scss

Let’s change $body_font & $secondary_font like this:

$body_font: 'Nunito Sans'; // Change to your new font
$secondary_font: 'Playfair Display'; // Change to your new font

(You should removed !default)

Step 5: Go to Theme Options -> SCSS Compiler and Enable it.

Resave Theme Options twice to generate new style-custom.min.css file.

Clear all cache and see changes.

In this tutorial we use theme Haru Circle – Multipurpose filmmaker wordpress theme . This theme also can use for wordpress video theme with 10+ home page and beautiful design.

You can download our theme from here: https://themeforest.net/item/circle-multipurpose-wordpress-theme/20454326?ref=HaruTheme

Hope this will help you all can easy add custom font in our theme!

******

Best regards,

HaruTheme

• This topic was modified 5 years, 2 months ago by admin.
• This topic was modified 5 years, 2 months ago by admin.
• This topic was modified 5 years, 2 months ago by admin.
• This topic was modified 5 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.
• This topic was modified 4 years, 2 months ago by admin.

[Author]

Posts