Home Forums Themes Support General How to add custom font in WordPress theme

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #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:

    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);

    add custom font

    Step 3:

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

    add custom 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.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.