What are Google Fonts?
Google Fonts is an interactive directory of free hosted web font-API’s. It was launched in 2010. They are released under the SIL Open Font License 1.1, a free software licence. The fonts are also served by Monotype’s SkyFonts, and Adobe’s Edge Web Fonts and Typekit services.
Below are some basic steps on how to use Google Webfonts with WP Edit Pro.
Setting up Google Fonts
Start by clicking on the Fonts Tab:
Activate Google Fonts
Make sure to activate “Google Fonts” by clicking the check box.
Select Google Fonts
Click on Google Webfonts in the Build Font List section. This will open a new window (directly to Google) displaying all available Google Fonts.
Scroll through and find the fonts you would like to use.
The font name will be listed in the lower left hand corner of the font box (red arrow).
Once you have selected your desired font(s), go back to your WP Edit Pro admin panel and find the font in the dropdown box.
Once it is selected, it will show in your Current Font List (Red arrow). If you select the wrong font, just click the font and drag it to the Trash Bin (Blue arrow). This will completely remove it from your list. Click Save Font Options when you have all desired fonts selected (Purple arrow):
Adding Editor Buttons
Go back to the “Buttons Tab” and make sure Font Family and Font Size are added to your Editor Rows:
Be sure to “Save Button Options” (if ajax saving is disabled):
Start a new post (or edit an old one) and select your font from the dropdown box:
Final Results
I have a question about the use of Google fonts. When I upload a 6th font I get a warning that too many fonts will slow pageload. Is this true sitewide or if only one or two fonts appears on a given page? I have a complex magazine website and sometimes I want a new font to appear only on one specific page. Thanks in advance for any advice
Hi Karen,
It will apply sitewide (even if no Google fonts are on a certain page… they will still be called and loaded from Google). This is because there is no way to tell which post/page may have Google Fonts. So, they have to be loaded on all front-end pages.
However, the page speed reduction is negligible until you get up around 10 fonts. I did a lot of testing with this… and my page speed was not affected much until I hit around 10 or 15 fonts (maybe slowed the page load a full second).
I’ve added a note to my “to-do”. I can re-code the Google Fonts… and have a metabox on each post/page with a listing of the available fonts. You could “select” (checkbox) the fonts you want to load for that page… and it will only load those. This would be a nice way to only call the fonts needed for that page. But, this will take some time to implement.
Great Plugin…
Question: Google Fonts.
If I understand correctly with the (pro) version — It is possible to use Google (selected) fonts in specified areas (particular paragraph or sentence in a post/page) from the fonts dropdown list, am I correct?
Will there be a conflict using your Google fonts feature of your plugin if using Easy Google Fonts Plugin?
FYI: Working with Thesis 2.1 themes.
Thank you for your great product!
Hello Peter, and thank you for the kind words.
That is correct. The Google Fonts will allow you to apply your selected Google Font to any post/page content (anything available in the WP Editor). I’ve never used teh “Easy Google Fonts” plugin… so I cannot be sure of any incompatibilities. But, if you notice one, please don’t hesitate to let me know.
Are the Google fonts combined and minified into a local file? One of my biggest complaints about Google fonts are the performance hit your website takes when using them.
Hey, sorry for the delay. I had to dig into my code to ensure I’m telling you the truth. Yes, they are minified into a single call to Google Webfonts. However, additional fonts will still slow the API call. There is no getting around “the more fonts, the slower the page load”; but minifying into a single external call helps significantly.
Can use Non-Latin Font in Google Webfonts?
(see. http://www.google.com/fonts/earlyaccess)
thanks.
Hi,
I wasn’t even aware of that link. Thank you for sharing.
Well.. looks like I have more work to add to the Google Webfonts options…
Please contact us, using the link in the main nav, and we will add this request to our plugin trac.
I think it’s great.. and we will definitely incorporate it into WP Edit Pro.
Thank you!
thanks for your reply.
I’m expecting new feature (using Google Webfonts). 😉