Okay
  Public Ticket #3793118
Assistance Needed for Custom Font Integration in Salient Theme
Closed

Comments

  •  1
    Muhammad Faheem started the conversation

    Hello Team,

    I hope you are doing well! I have been using the Salient theme and truly appreciate its versatility and user-friendly design options. It has significantly enhanced the look and feel of my website.

    I am currently looking to integrate a custom font into my site, LookMyFinance .com. While reviewing your documentation, I noticed two methods: using a plugin or adding the font programmatically. I would like to seek clarification and guidance regarding the second method (adding fonts programmatically), as I prefer using a child theme for modifications.

    Could you please provide further details or examples to help implement this efficiently? Additionally, if there are best practices or potential challenges to be aware of during this process, I would be grateful if you could share them.

    Thank you for your time and assistance! Looking forward to your response.

    Best regards, Muhammad Faheem

  • Muhammad replied

    I also have a same issue on my website

  •  8,996
    Tahir replied

    Please Find the article below already available for valid item support subscriptions:

    Add custom fonts to the "Typography" section of the Salient Theme Options Panel Option #1: Use a plugin

    The plugin Use Any Font will allow you to upload custom fonts via a user interface and automatically add them into the Salient options panel > Typography tab as options. This approach is the easiest approach.

    Option #2: Add font programmatically

    If you would rather add new fonts via custom WordPress filters/font-face rules, there are several options.

    - The Below example uses the @font-face method and the fonts are included in a Child Theme.

    Step 1:

    @font-face CSS methods are included in the Salient Theme Options Panel -> General Settings -> Custom CSS Box to import the relevant font files.

    @font-face {
        font-family: 'Proxima Nova Light';
        src: url("/wp-content/themes/salient-child/fonts/ProximaNova-Light.woff") format("woff"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-Light.otf") format("opentype"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-Light.ttf") format("truetype");
        font-weight: 300;
        font-style: normal;
    }
    @font-face {
        font-family: 'Proxima Nova LightIt';
        src: url("/wp-content/themes/salient-child/fonts/ProximaNova-LightIt.woff") format("woff"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-LightIt.otf") format("opentype"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-LightIt.ttf") format("truetype");
        font-weight: 300;
        font-style: italic;
    }
    @font-face {
        font-family: 'Proxima Nova Regular';
        src: url("/wp-content/themes/salient-child/fonts/ProximaNova-Regular.woff") format("woff"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-Regular.otf") format("opentype"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'Proxima Nova RegularIt';
        src: url("/wp-content/themes/salient-child/fonts/ProximaNova-RegularIt.woff") format("woff"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-RegularIt.otf") format("opentype"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-RegularIt.ttf") format("truetype");
        font-weight: normal;
        font-style: italic;
    }
    @font-face {
        font-family: 'Proxima Nova Semibold';
        src: url("/wp-content/themes/salient-child/fonts/ProximaNova-Semibold.woff") format("woff"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-Semibold.otf") format("opentype"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-Semibold.ttf") format("truetype");
        font-weight: 600;
        font-style: normal;
    }
    @font-face {
        font-family: 'Proxima Nova SemiboldIt';
        src: url("/wp-content/themes/salient-child/fonts/ProximaNova-SemiboldIt.woff") format("woff"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-SemiboldIt.otf") format("opentype"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-SemiboldIt.ttf") format("truetype");
        font-weight: 600;
        font-style: italic;
    }
    @font-face {
        font-family: 'Proxima Nova Bold';
        src: url("/wp-content/themes/salient-child/fonts/ProximaNova-Bold.woff") format("woff"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-Bold.otf") format("opentype"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-Bold.ttf") format("truetype");
        font-weight: bold;
        font-style: normal;
    }
    @font-face {
        font-family: 'Proxima Nova BoldIt';
        src: url("/wp-content/themes/salient-child/fonts/ProximaNova-BoldIt.woff") format("woff"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-BoldIt.otf") format("opentype"),
            url("/wp-content/themes/salient-child/fonts/ProximaNova-BoldIt.ttf") format("truetype");
        font-weight: bold;
        font-style: italic;
    }
    
    5620744081.png

     

    Step 2: 

    Add PHP Code using Code Snippets Plugin for the Salient Theme Options -> Typography Section Fields.

    function salient_redux_custom_fonts() {
        return array(
            'Custom Fonts' => array(
                'Proxima Nova Light' => 'Proxima Nova Light',
                'Proxima Nova LightIt' => 'Proxima Nova LightIt',
                'Proxima Nova Regular' => 'Proxima Nova Regular',
                'Proxima Nova RegularIt' => 'Proxima Nova RegularIt',
                'Proxima Nova Semibold' => 'Proxima Nova Semibold',
                'Proxima Nova SemiboldIt' => 'Proxima Nova SemiboldIt',
                'Proxima Nova Bold' => 'Proxima Nova Bold',
                'Proxima Nova BoldIt' => 'Proxima Nova BoldIt'
            )
        );
    }
    add_filter( "redux/salient_redux/field/typography/custom_fonts", "salient_redux_custom_fonts" );
    
    9866201058.png

     

     

    Conclusion: 

    You should be able to now select the Custom Fonts from the Typography Section in the Salient Theme Options.

    2109946034.png

    Adds Salient compatibility to https://wordpress.org/plugins/custom-typekit-fonts/ plugin

    Add PHP Code using Code Snippets Plugin 

    // Adds Salient compatibility to https://wordpress.org/plugins/custom-typekit-fonts/ plugin 
    function salient_redux_typekit_fonts() {
        
        $kit_info = get_option( 'custom-typekit-fonts' );
        if (!empty($kit_info)):
            foreach ($kit_info['custom-typekit-font-details'] as $fontArr):
                $fontCssName=$fontArr['css_names'][0];
                $fonts_typekit['Typekit Fonts'][$fontCssName]= $fontCssName;
            endforeach;
        endif;
          return $fonts_typekit;
    }
    add_filter( "redux/salient_redux/field/typography/custom_fonts", "salient_redux_typekit_fonts" );
    

     

     

    Best,

     


    ThemeNectar Support Team