Salient v14.0 (11/15/2021) is out now!

After updating, remember to clear the cache from any performance plugins you have active as well as your browser cache.

Once you've updated your theme, make sure to also update your Salient plugins to get access to the new features.

Click here to view the update guide

View Changelog

Okay
  Print

Add a Custom Font

How To Make the Custom Font Show Up in The Typography Section of Salient Theme Options Panel ?. 


We can add Custom Fonts in several ways :

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



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


Conclusion: 

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



Revised Post.

Date: May 20, 2020