We will try adding “Bagatela Regular” fonts to Redux Framework
#1. Step 1:
Copy the fonts with the format (.ttf, .otf, .woff, .eot, .woff2) in the directory wp-content/themes/travelwp-child/fonts
#2. Step 2:
Create a new file fonts.css located in the directory wp-content/themes/travelwp-child/fonts and copy the following code in that file.
@font-face {
font-family: "Bagatela-Regular";
font-style: normal;
font-weight: 500;
src: url("Bagatela-Regular.eot"); /* IE9 Compat Modes */
src: url("‘"Bagatela-Regular.eot?#iefix"’") format(’embedded-opentype’), /* IE6-IE8 */
url("Bagatela-Regular.woff2") format("woff2"), /* Super Modern Browsers */
url("Bagatela-Regular.woff") format("woff"), /* Pretty Modern Browsers */
url("Bagatela-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
}
You need to change “Bagatela-Regular” with the font name you want to install
#3. Step 3:
in file functions.php of child theme you add the custom code below:
function travelwp_redux_custom_fonts( $custom_fonts ) {
return array(
"Custom Fonts" => array(
"Bagatela-Regular" => "Bagatela-Regular",
)
);
}
add_filter( 'redux/travelwp_theme_options/field/typography/custom_fonts', 'travelwp_redux_custom_fonts' );
#5. Step 4:
Add this code after the line #7
wp_enqueue_style( 'custom-font', get_stylesheet_directory_uri() . '/fonts/fonts.css', array( $parent_style ) );