Over the last few months at work we've been digging into the WordPress Theme Customizer and thinking about using it as the basis for a SaaS web app. Building upon the basic controls for the theme customizer is one of the challenges we've been facing and the Google Font Picker Control is the first of (at least two) the controls that we developed to make the Theme Customizer even more awesome.
Way back in the before time when Al Gore founded the Internet and it was still black and white including fonts on your website was an amazingly difficult thing. Most developers didn't bother and instead used rastered images which bring up a whole new slew of problems. Google Fonts, Typekit, & Font Squirrel are some of the awesome services that have cropped up in the last few years to fix this. Google Fonts simply allows you to put any of their open-source fonts on your website for free with just a couple lines of code.
With this plugin we combine the idea of having any of these awesome fonts available to us and being able to preview them and easily select them in the theme customizer. Check it out.
All you have to do is click on the font that looks best to you and it is applied across your website. The plugin uses a bit of jQuery to detect the clicks and it modifies a hidden select box. Pretty cool huh?
As part of my programming new years resolutions I've committed myself to writing better documentation so you can find all the code you need to implement this on your own site on the Github Project page.
Great plugin! Thank you.
Can i use different controls for body and headings? I have implemented everything exactly like you instructed to my customizer.php except i had to add following line into it. I think it’s not mentioned at instructions..
$wp_customize->add_setting('font_family', array());
It works fine for changing font-family for body. What it i want different font-family for h1, h2 or even for custom class? Is it possible?
I accessed to the stored value from theme (header.php) like this:
body { font-family: ; }
Is that correct way to do this or is there a better way to “implement value to front-end”?
Hey Riku,
I think the comment form is stripping out the PHP you’re entering but I get the gist. This control is only a control you should be able to add multiple controls and have them apply to different elements on the page. Feel free to submit a pull request if you think it’s a feature other users may want. 🙂
I’m unable to get this to work using the example listed on github. First error was
Class ‘Google_Font_Picker_Custom_Control’ not found. I changed it toGoogle_fontin the control setting. Then I got thiserror Missing argument 4 for Google_Font::__construct() which is defined in google-font.php on line 15 which is public function __construct($title, $location, $cssDeclaration, $cssClass)Any chance you could update the example code, or explain what I’m doing wrong? I can figure out basic customizer on/off options but I’m having trouble figuring this out.
Hey Scott,
At this point the project is two years old with very little interest. I won’t be maintaining this project any more. Sorry.