Google Fonts
Of course I knew about Google Fonts. But that was all I knew: about! Now is the time to learn how to use them. Because right now Google has over 676 font families. They are FREE! And they are BEAUTIFUL!!
You can check them out at GoogleFonts.
I didn’t try Google Fonts out before because:
- I thought it would be too hard.
- I could make do with what I had.
- I thought it might slow my site(s) down.
How to Use Google Fonts
There are 2 different methods I have come across. (I am sure there are many other ways. But you will have to research that for yourself!)
I like my 3 ways because I like Simple!
Three Methods on How to Use Google Fonts
- the plugin way. Specifically Easy Google Fonts plugin (for Titanium Themes) for WordPress.
This plugin enjoys a very high user review. At time of writing, it has 70,000+ active installs. - Link to it
- the Genesis way (I do so recommend and love the Genesis Themes) by Brian Gardner on How to Use Google Web Fonts With Your Genesis-Powered Website. The instructions are super clear so I won’t bother writing it up. It uses @import
I’ll talk a bit more about the Easy Google Fonts plugin. Specifically answers that I found to questions I had but which are not immediately obvious.
Method 1: Easy Google Fonts plugin (for WordPress)
First, a handy video (by the developers of the plugin) on how this plugin works. You will be impressed! You will want it for yourself! (Especially if you are already drooling over the Google Fonts!)
or you can find the video at: https://vimeo.com/77878709#t=357s
Q. Will it slow down my site?
The developers claim not. No more than if you were manually using any imported font family via coding directing into your stylesheets. However if you run a Google Page Speed test, it will most probably show up as the Google fonts are “render blocking resources” or something alarming like that.
Not to worry. According to Google themselves, “both HTML and CSS are render blocking resources” by default. Basically it just means that your page is not rendered till the HTML and CSS are available. Otherwise your site would look like raw text. Google’s article on Render Blocking CSS is very short but very illuminating.
Q. Where is the generated CSS code stored? Can I see it?
The css styles are stored in a database. So no, it cannot be easily seen.
Q. How do I set everything back to the way it was if I no long want to use the plugin?
You go the the plugin’s customizer (all that is explained in the video above. All very easy.) For every style control, just click reset. Save Changes.
The deactivate and delete plugin.
Method 2: Link to Google Font
At Google Fonts, after you have done your shopping and found the font of your dreams, you just need to scroll down a bit. You will find the code for 3 different ways that Google helps you with using their font. The “Standard” way is to link it.
Instructions: Google Fonts
The code should look something like:
Just copy that and put that into the <head> section of your site.
(See: Where is WordPress head section)
My Conclusion
I have now tested out the Easy Google Fonts plugin. It works very fast. And amazingly well. However it does seem to stall a bit after prolonged used and testing multiple fonts.
However personally, I have decided to go with Method 3: Brian Gardner’s Genesis method on How to Use Google Web Fonts With Your Genesis-Powered Website. Please note that this method is not specifically only for Genesis themes. It can also be used for any site with stylesheets.
I am only choosing this method because it gives be better control. I feel I can better see what I am doing. And because any WordPress theme has so many little bits with classes already that it would be easier for me to work with the normal CSS stylesheets.
For anyone who doesn’t like all that CSS code and/or wants only to make simple changes to any of the common elements of a web page (e.g. H1 .. H6, paragraphs, etc.) then I would definitely recommend the plugin.
Tip:
Actually I have also installed the plugin. It is a great and fast way of seeing how it will look like on your site before getting the Google Font via the @import method by Brian Gardner. You can always deactivate the plugin when not in use. Which will minimize any impact on site performance. 🙂
Reference:
- wordpress.stackexchange.com: Do deactivated plugins slow down a WordPress site?
Your Comments? Tips to share?