Home › Forums › Themes Support › General › How to add custom font in WordPress theme
- This topic has 0 replies, 1 voice, and was last updated 5 years, 8 months ago by
admin.
-
AuthorPosts
-
March 29, 2018 at 1:58 am #1156
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:
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, 8 months ago by
admin.
-
This topic was modified 5 years, 8 months ago by
admin.
-
This topic was modified 5 years, 8 months ago by
admin.
-
This topic was modified 5 years, 8 months ago by
admin.
-
This topic was modified 4 years, 8 months ago by
admin.
-
This topic was modified 4 years, 8 months ago by
admin.
-
This topic was modified 4 years, 8 months ago by
admin.
-
This topic was modified 4 years, 8 months ago by
admin.
-
This topic was modified 5 years, 8 months ago by
-
AuthorPosts
You must be logged in to reply to this topic.