Google Webfonts


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:

gwf1

Activate Google Fonts

Make sure to activate “Google Fonts” by clicking the check box.

If it is unchecked, you WILL NOT see your added font families.

gwf2

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.
gwf13-1

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).

gwf4-1

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.

gwf11-1

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):

gwf5-1

Adding Editor Buttons

Go back to the “Buttons Tab” and make sure Font Family and Font Size are added to your Editor Rows:

gwf8-1

Be sure to “Save Button Options” (if ajax saving is disabled):

gwf9-1

Start a new post (or edit an old one) and select your font from the dropdown box:

gwf14-1

Final Results

gwf10


Monica Rogers has written 5 articles

Customer service by day, wine connoisseur at night; I am a full-time support specialist at WP Edit Pro. "It's not about the destination... but rather, the journey."

9 thoughts on “Google Webfonts

  1. Karen says:

    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

    1. Josh Lobe says:

      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.

  2. Peternyc says:

    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!

    1. Josh Lobe says:

      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.

  3. John Blair says:

    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.

    1. Josh Lobe says:

      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.

    1. Josh Lobe says:

      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!

Leave a Reply

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

ENTER CAPTCHA MATH *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>