Customers certainly wish to add custom fonts to Redux Framework, which can help them freshen up your theme and make it stand out among tons of themes that were built on this framework.
What is Redux Framework?
Redux is a simple, truly extensible options framework for WordPress themes and plugins, which is built on the WordPress Settings API, Redux supports a multitude of field types as well as custom error handling, custom field & validation types, and import/export functionality.
This framework with the powerful admin panel creates an incredible improvement in building the WordPress site and that’s the reason why more and more users select this framework to develop their site. However, nothing is perfect and there is no exception to Redux Framework. In this post, we mention the limitation of fonts and giving the solution as well.
Why do users need to add custom fonts?
Typography is the first impression of your theme
You must hear about the idiom “Love at the first sight” and there is no exception here. Whether customers stay a long time in your theme or not depending on the first impression it put in their mind and that’s called Typography. Hence, choosing a typeface for your theme that suitable and outstanding plays a vital role and never been easy. And when Redux Framework only offers some default font types, you need to break this limitation by adding a custom font to this framework.
You wish to be different
No one wishes to be similar to others and I know you too. It’s understandable that Users want to add some fonts to the theme they bought that aren’t available in the Redux Framework Core. And they want to still keep using the framework that is truly extensible options framework for WordPress themes and plugins and adding custom fonts will be a great solution for that.
How do users easily add custom fonts to Redux Framework?
We will give you a step by step guide to add custom fonts to Redux Framework right from here. Follow them to explore the prosperous fonts that you should be deserved.
In this post, we will try adding “Bagatela Regular” fonts to Redux Framework of Organisk theme – one of our awesome themes. Notably, these steps also works fine with other themes.
Preparing:
- An FTP connection to the server
- The fonts in various formats (.ttf, .otf, .woff, .eot, .woff2)
- A live theme
As I mentioned I will use “Bagatela Regular” as my example in this post.
#1. Step 1:
Copy the fonts with the format (.ttf, .otf, .woff, .eot, .woff2) in the directory wp-content/themes/yolo-organisk/fonts
#2. Step 2:
Create a new file fonts.css located in the directory wp-content/themes/yolo-organisk/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:
Edit the file field_typography.php located in the directory wp-content/themes/yolo-organisk/framework/core/redux-framework/ReduxCore/inc/fields/typography/
Add this code after the line #39
‘Bagatela-Regular’ => “Bagatela-Regular”,
#4. Step 4:
Find this line of code
if ( isset( $this->field[‘all_styles’] ) && ! empty( $this->field[‘all_styles’] ) ) {
then copy this code above
$this->field[‘ext-font-css’] = get_template_directory_uri() .’/fonts/fonts.css’;
#5. Step 5:
Edit the file frontend-enqueue.php located in the directory wp-content/themes/yolo-organisk/framework/includes/frontend-enqueue.php and add these lines to the “yolo_enqueue_styles” function.
wp_enqueue_style( ‘redux-external-fonts’ );
wp_register_style( ‘redux-external-fonts’, get_template_directory_uri().’/fonts/fonts.css’);
Done! Now you can see the fonts you wish on the dropdown of the Redux fonts Menu.
(*NOTE: You go to Theme Options -> Typography -> Set custom font)
BONUS!!!
Where Can I find FREE fonts?
Most of these fonts’ resources are free for anyone with various font types. And you can freely choose the type font for your beloved theme without any limitation. If you find useful tips in this post, please like, share, twit, +1 that motivate us to write better posts. Thanks for reading!
