Create a simple Google Font selector for WordPress Admin with font preview

While creating a new theme for WordPress, I have been looking for a simple way to have a select dropdown menu that would allow the user to choose a web font.
I really wanted that the dropdown to show the preview of the fonts, for a better user experience.

After digging and trying different solutions, I found a very simple way to accomplish this, with only few files.

I am using jquery.fontselect.js, a javascript plugin that allow to preview and choose web fonts from google fonts.

Here is how to proceed:

1) Download jquery.fontselect.js and put the JS and CSS files into your theme folder. Do not forget to also put fa-sprite.png in your CSS folder.

2) Enqueue your scripts for  admin in functions.php

3) Create a custom control function

4) Require this new control in your cuztomizer file, and setup the settings and controls:

5) We need JS to pass the values. Put this in your admin.js file for example, and of course do not forget to enqueue the file to have it loaded in admin

6) Finally, we need to load the styles in our theme. I personally use a “custom_styles.php” file that I include in my header, but you can put this anywhere you want.

 

 


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">