Salient v13.0 Major Release (3/25/2021) is now available.

If you're on a version prior to 10.5 and are considering updating, it's important to read through our update guide before updating to ensure a smooth transition.

Click here to view the update guide

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