When it comes to website design, webmasters always focus on the background image, content layout, logo design, sidebar, header and footer. In fact, the customization of font is also important. After all, people who visit your site mainly read the textual content to get what you want them to know, so a proper typeface with right size and clear display can never be ignored, which can improve the reading experience of your visitors greatly.
In general, webmasters use Arial, Helvetica, Georgia and Verdana as the web fonts. But what if you want to use something different? Here, we highly recommend you to use Google Fonts, collecting hundreds of widely-used open source fonts for you to use, no matter you are a professional designer or a green-hand newbie. Looking for the method of using Google Fonts for the improvement of your webpages? You can refer to this how-to tutorial or check the tips introduced in the following.
Add Google Fonts using Codes
Firstly, you need to log into the official Google Font website of https://www.google.com/fonts. Here, you can select from 650+ web font families available. Simply make your decision and add your preferred ones by clicking the “Add to Collection” button. Note that the majority of font families have multiple styles, with which you can choose your favorite ones.
Next, you need to click the “Use” button located at the right bottom place of your current webpage. Then, check whether the font style and the character sets are the ones you want. Note that the character set is always chosen as Latin.
Now, you can add your preferred Google web font into your website via two steps:
- The system will generate a specific line of coding based on your requirements decided previously. What you need to do is to copy and paste the coding stuff into your webpage. Note that the code has to be embedded after the <head> tag of HTML document, locating as the first element.
Example
<html>
<head>
<link href=’http://fonts.googleapis.com/css?family= FontName’ rel=’stylesheet’ type=’text/css’>
</head>
<body> <div>XXXXXXXX</div> </body></html>
- Below the first coding, you also need to add the font name into your CSS style. The system will prepare the right code for you, so you only need to paste it into your stylesheet.
Use Google Fonts Plugin
If you are a web beginner, the first method may be a little bit technical due to the utilization of coding stuff. In this case, you can refer to some plugins, modules and widgets that can do this for you automatically. Here, let’s take WP Google Fonts as an example. Note that this is a WordPress plugin and can only be used on WordPress.
After installing and activating this plugin via WordPress dashboard > Plugins, you can add your custom web font from Settings > Google Fonts. Here, you can choose your preferred font name from the first drop down menu. Then, if it has multiple font styles, you have to pick one that fits your needs the best.
After that, you can decide the character sets as well as the elements that can use this web font among all content, headline, blockquotes, paragraphs and lists. Besides, if you bear the CSS knowledge, you can also add some unique styles for color, size, shadow and many more.
If your website is built using WordPress, you can use this plugin or search other options from WordPress.org or some WordPress resource sites like WPMatter. However, if you are using Joomla or Drupal for your website creation, then you need to find the related modules from Joomla.org or Drupal.org respectively.
Use Premium Themes Supporting Google Fonts
With the popularity of Google Fonts, more and more theme designers and developers have integrated it into the themes and templates. With them, you don’t need to use code or install extra plugins, but can use Google web font easily during the configuration of themes.
In this case, if you have already activated a theme for your site, you’d better go back to its downloading link to check whether it has the Google Font feature. If yes, then use it. If not, then resort to the method one or method two. However, if you are looking to start a new site from scratch with a new theme, you’d better pick one that integrates Google Font by default.
Leave a Reply