Use Any Custom Font in Your Popups and Modals

This guide is going to teach you to import any font you want into Easy Modal for use in the Easy Modal WP Admin

Restricted to Terrible Fonts, No Longer We Are

Use Any Font with Easy Modal

Use Any Font with Easy Modal

We’re going to use good ‘ole php in our functions.php that will give us the ability to pick and choose which fonts we want to use with our modals and popups. Once you implement your choice of code, you’ll have your fonts available in the drop downs in the Easy Modal Theme Editor.

Because of the versatility of Easy Modal, and the way it was built, we just need to make a few lines of code using a Filter.

The emodal_font_family_options Filter

As the name suggests, this filter is going to allow us to edit the Font Family Options.

In your functions.php file, add the filter by using the Add Filter WordPress Function:

add_filter ('emodal_font_family_options','my_custom_modal_fonts');

This just activates the filter on your side, and gives it a name to be used in our function. In this example, I named it my_custom_modal_fonts, but you can name yours whatever you like.

Going forward, there are multiple options to choose from regarding how you want to implement your function, but we’re just going to cover two functions here:

Choosing Your Custom Fonts Function

Just One or a Couple of Fonts

Again, this is ideal for just one or a couple of fonts. The code below creates the function using the named filter from above:


function my_custom_modal_fonts ($options) {
/* Label = CSS Font Name */
$options['Lucida Sans'] = 'Lucida Sans';
$options['Arial'] = 'Arial';
return $options;
}

Many Fonts

This code is good in case you need to bring in many fonts, and in this case, uses an array to do so:


function my_custom_modal_fonts ($options) {
return array_merge($options, array(
/* Label => CSS Font Name */
'Lucida Sans' => 'Lucida Sans',
'Exo' => 'Exo',
'Times New Roman' => 'Times New Roman',
'Oswald' => 'Oswald',
'Lobster' => 'Lobster',
'Arial' => 'Arial',
'Lucida Sans' => 'Lucida Sans',
'Lucida Sans' => 'Lucida Sans',
'Lucida Sans' => 'Lucida Sans'
);
}

Font Label & CSS Font Name

As you can see in the commented out lines, there’s something called Label and CSS Font Name.

Label

Label is simply whatever you want to call your font, this is what will display on the front end on the drop down where you select your font in the Theme Editor. Obviously, you probably want to name it whatever the name of the font is.

CSS Font Name

This is the code version of the font name. As it suggests, however you implement the font in CSS is how you will implement and input it here, verbatim.

All Done

Hope you’ve enjoyed this guide, share the link with your friends and others who may have a use for this functionality!

[edd_social_discount]