How to Guide For Using Google Fonts With Google And Plugins!

Using Google Fonts With Google And Plugins

If you are a designer, you are more likely to consider typography as the foundation of any website design. Not only selecting the fonts but also providing an edge to the readability of web pages.

What Is Typography?
Typography is all about selecting line length, point size, line spacing, typefaces and adjusting the spaces between the groups of letters.

Why is Google Fonts a clear choice?
There were times when the internet had standard fonts that would bore anyone looking at them, but as time paced, the web designers and developers were forced to limit their live text font choices and design the fonts that are compatible with the greatest number of users over the Internet. They came up with CSS3. Typekit initiated it.

Typekit developed some of the enticing fonts that helped designers selecting appealing and user-friendly fonts for their web pages, but the only issue in using Typekit was the cost they charge to their users.

The price was $49 and in case a designer would want to develop two sites, he had to pay $99 just for using fonts on the web page. Thanks to Google who came along with its brilliant font designs and offered it for free.

It’s quite obvious that you don’t get free what you can get with money but believe it, the Google Web Fonts were nonetheless than the one offered by Typekit. Of course, Google Web fonts are best when you don’t like spending too much on fonts as you know building entire website costs too much.

Google Fonts and Their Customization:
As of today, there are over 647 fonts separate font families in the Google library. When you’re selecting a font for your website’s content, it’s imperative to view it in a similar fashion to how you’re going to implement that font. Some fonts look perfect for body content but dreadful as a heading.

Luckily, Google Web Fonts allows you to customize your preview to match your use case. You can enter custom preview text, and change your preview size as preferred. It is important to preview any header or body copy you are going to use in paragraph view and if, you have a lot of body copy, don’t use too much custom fonts.

Funnelling Down The Right Font!
As we are aware of more than six hundred font families to sift through, it gets difficult to filter and choose the right one by simply scrolling through them one by one. So, use the below steps to hone in on exactly what you need for your website:

• Take a quick look at the fonts that are recently updated by Google. The chances are you’ll get the trending and bug-free font without having to look rest of the fonts. Also, see the fonts used by most of the designers and developers. Doing this will allow you to know of versatile fonts that you can use in multiple styles and widths.
• If you know the typeface for your website, characteristics and style of fonts can improve your results like if you want a handwritten font, disable all other types of results.
• Google allows you to refine your font search further by adding thickness, slant and width of the character as filtering options. Isn’t it cool feature to get the best font for your website?

Selecting The fonts
Google has various methods to choose and then implement the fonts according to a website owner’s needs. There’s nothing right or wrong here. Whatever is best for you, you’ll get that. It supports three buttons to help you choosing the right font:

• Quick Use: To quickly take a look at the font you like.
• Pop out: To know more about the font that you like i.e its functionality and uses.
• Collection: If you want to use more than two fonts, Collection is the button you need to click on. It’ll add all the fonts that you like on a single page.

How To Use The Google Fonts?
Once you’ve selected the fonts that you’d like to use on your webpage, you can click on the “Use” tab to see them in action. Now, when you are sure about the font, all you need is simple copying and pasting some code on your webpage. You’ll get three options to choose from:

Standard:
It is a standard stylesheet link. You need to place it in the head part of your HTML file, thus saving you the step of adding the @import rule as you’re significantly adding in a stylesheet that already has it thrown in. Example:

CSS:
Use CSS @import rule in case you don’t want to link to the auto-generated stylesheet in your header. Use the below code to integrate the fonts into your CSS:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google and Typekit, both developed this code in here as a part of WebFont loader to give the users more control over font loading.

Grab an HTML snippet and put it near to HTML header as:

 

Page Title

 

Jump to the CSS and follow this:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

With The Help of Plugins!
There are some plugins available that offer seamless Google Font integration. Using Plugins has its limitations like a plugin won’t know to look for particular text without customizing further with the help of HTML or CSS. But still, here are few plugins to include Google fonts to your website.

1. Fonts Plugin

It is an easy and effective way to inlay Google fonts to your website with only a few clicks. You can either use your stylesheet or use CSS style; both will work to adapt them to your theme. You can do it from admin area or your website’s stylesheet. Fonts Plugin is all you require for your website, quickly and efficiently.

2. Embed Google Fonts

With Easy Google Fonts plugin, you don’t need to touch any coding to get the fonts on your website. From choosing to optimizing and giving unique colors to live to preview, everything with fonts can be done using Easy Google Fonts.

3. TK Google Fonts

TK Google Fonts will add all 291 Google Web fonts into your visual editor panel when you are developing pages or posts. Just install it and start using it.

Installing The Above Plugins:

• Login to the WordPress Administrator
• Click “Plugins”
• Click “Add New”
• Type the plugins name in the top right hand corner and click on “install now”

To Customize The Plugins

• Click on “Appearance” and then click on “Customize”.
• Click on “Visit Site” and then on “Customize”
• You’ll notice a new added menu as “Typography”

Implement The Learning!
We hope, reading the article was a learning lesson to use, and now, it’s time to use this knowledge on your website. Browse through various fonts, plugins to improve the typography in your websites. Keep in mind that if you are customizing a font, it’ll be more beneficial than just copy pasting a font. Let us know the fonts and methods you use to add typography to allure your audience in your projects.

Fonts enhance the aesthetic form of a website and are the foundation of any website design. Fonts or typography is all about selecting line length, point size, line spacing, typefaces and adjusting the spaces between the group letters.

As a designer, it is always good to refine your font search further by adding thickness, slant and width of the character as filtering options. Not all fonts look good in the body and/or heading content.

Some fonts do not look good as a heading and others cannot be read easily on the body content. Therefore, it is advisable to view you selected font in a similar fashion to how you are going to implement it so that you can test its readability.

Gone are the days when the internet used to have the same old boring standard fonts. Technology advanced and web designers and developers were forced to design fonts that are compatible with the greatest number of users over the internet.

They came up with CSS3. Typekit initiated it and developed some of the enticing and appealing fonts for web designers to use. But, they were too costly. Thankfully, Google came to the rescue and offered brilliant, user-friendly font designs for free.

Funneling Down the Right Font!

Currently, the number of fonts in the google library stands at 647, making it hard to filter and choose the right one. However, with these 3 steps, you can get exactly what you need for your website:

• Take a look at the recently updated fonts on google and get a trending and bug-free font. Also, look up fonts used by majority of designers to allow you to know about the versatility of fonts that you can use in multiple styles and widths.
• Know the typeface for your website, characteristics and style of fonts to improve your results.
• Refine your font search by adding thickness, slant and width of the character as filtering option.

Selecting Fonts

Depending on your needs, Google has several methods to help you select a font. To choose the right font, consider:

Quick access-To quickly take a look at the font you like

Pop Out- To know more about the font, i.e functionality and uses

Collection-If you want to use more than two fonts, click on this button. It will add all the fonts you like on a single page.

How to Use Google Fonts

Once you have selected your preferred font, click on the ‘Use’ tab to see them in action. Then, copy and paste some code on your webpage. You will get three options to choose from:

Standard-This is a standard stylesheet link. Place it in the head part of your HTML file. It will save you the step of adding the @import rule as you are significantly adding in a stylesheet that already has it.

CSS-Use the CSS @import rule in case you do not want to link to the auto-generated stylesheet in your header. Use the below code to integrate the fonts into your CSS:

font-family: ‘Henry Pigeous’, serif;
font-family: ‘Diplomatic’. cursive;

JavaScript-Google and Typekit, both developed this code in here as a part of Web Font loader to give the users more control over font loading.

Grab an HTML snippet and put it near to HTML header as:

Page Title

Jump to the CSS and follow this:

h1 {

font: 400 45px/0.5 ‘Diplomatic’, Arial, sans-serif;

}

p {

font: 400 14px/1.5 ‘Henry Pegasus’, Times, serif;

}

 

About The Author:
Catherrine Garcia is an experienced Web Developer at Hosting Facts and a passionate blogger. She loves to share her knowledge through her articles on web development and WordPress.