Before the web design superiority there had too little resources for designers having to build up awesomeness across the design field entirely. Google fonts has come into industry and alleviated millions of designers headache across web typography, typekit and @font-face. This is so flexible, smart, easy, free and open source that you can design body text, titles, headlines so fast that you haven't made that before.
Google font is the primary choice to pick up any font suggestion instantly before to put correct type face format for any theme, template. You can choice the perfect one from 600 more stylish font collections. These fonts can be used both commercially and non-commercially for web development. Having vast portfolios of Google fonts it's too crucial to choose the perfect one for your next designed sites.
Google fonts is quite easy to implement on any platform i.e. Blogger, WordPress, Drupal etc. Only you need to install the font family style sheet in a CSS link, or embed the javascript code close to <head> tag then apply font style on your website. For self hosted websites like WordPress you can host the font family on your server and use the CSS code.
As there are over 600 font families in Google fonts so it's much crucial to find out the perfect font for your website, here I have accrued 33 best and favorited font families according to popularity and my own choice. I hope they will help you to match your site typography easily.
01. Actor
02. Asap
03. Belleza
04. Bree Serif
05. Coda
06. Cuprum
07. Dosis
08. Droid Serif
09. Fauna One
10. Forum
11. Istok Web
12. Lato
13. Lora
14. Merriweather
15. Montaga
16. Open Sans
17. Oswald
18. Overlock
19. Oxygen
20. Philosopher
21. PT Sans
22. Raleway
23. Roboto
24. Roboto Slab
25. Rokkitt
26. Ropa Sans
27. Share
28. Slabo 13px
29. Source Sans Pro
30. Ubuntu
31. Varela Round
32. Vollkorn
33. Yanone Kaffeesatz
How to Use Google Font
Once you have found your preferred font families from Google fonts stock you need to install it on your site. Below is given the instructions how you can use Google fonts on your site:Add following css code right after <head> tag
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'/>Now to apply the design on typeface use following code
h1 {If you want to know more about Google fonts integration then there is a getting started guide which is very much simple to understand the basic essentials.
font-family: ‘Metrophobic’, Arial, serif;
font-weight: 400;
}
If you get the article helpful don't forget to share this article with favorite social networking and social bookmarking sites.
0 comments