How to use Google Web Fonts and Font Combinations

How to use Google Web Fonts and Font Combinations
[rating itemreviewed=”How to use Google Web Fonts and Font Combinations” rating=”10″ reviewer=”Burak Atilla” dtreviewed=”21.04.2013″ summary=”cool article about google web fonts and combinations” best=”10″ worst=”0″][/rating]

One of main issues of a good webpage is, using correct font combinations. Google gives font services almost 3 years for web developers and designers freely. Having a good typography in your website will carry you a step forward, vice-versa bad fonts will make your rank fall down. Today we will cover most used Google Font Combinations. You can create amazing website typography by using this cool Google web font combinations.

We created this collection from top quality design blogs and top rated websites. We hope this collection will be useful for you. Please don’t forget to bookmark this page for future visits and also share this article on your social media profiles for help us.

What is Google Web Fonts

Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially — in print, on your computer, or in your websites. For get to the Google Fonts, click here

How to use Google Web Fonts?

Visit Google Web Fonts website and click fonts you like. All you have to do is, add your site the fonts you like. Add link below into the header of your website.


Now wherever you want font to use, add it to your style.css. In example, if you want in H1 tag, code must be as below:

h1 {
font-family: 'Oswald', sans-serif;
}

How to add font with @import feature

Open your style file and paste code below at the top of your style file.

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

Repeat the step same as first method we used. Add font into the wherever you want it to appear.

At last step, let’s see how to add javascript to your design. Paste code we give below, into your designs footer or header. So font will be injected into your website.


Do the steps as we mentioned above for where you want fonts to be used. If you had an idea about usage of fonts, let’s take a look of font combinations. Below is our font combinations list :

1- H1 : Lato / Body : Old Standart TT

1

2- H1 : Dosis/ Body : Ubuntu

2

3- H1 : Bitter/ Body : Source Sans Pro

3

4- H1 : Open Sans / Body : Pontano Sans

4

5- H1 : Lobster / Body : Droid Sans

5

6- H1 : Fjalla One / Body : Roboto

6

7- H1 : Denk One / Body : Sintony

7

8- H1 : Sanchez / Body : Rambla

8

9- H1 : Archivo Black / Body : AbeeZee

9

10- H1 : Mouse Memoirs / Body : Rambla

10

In this article, we used fonts below :

  • AbeeZee
  • Archivo Black
  • Bitter
  • Denk One
  • Dosis
  • Droid Sans
  • Fjalla Oe
  • Lobster
  • Lato
  • Mouse Memoirs
  • Old Standart TT
  • Open Sans
  • Pontano Sans
  • Roboto
  • Rambla
  • Source Sans Pro
  • Sintony
  • Sanchez
  • Ubuntu

Web Font Combinator

Another useful tool for typography is, Web Font Combinator. This tool can be reached by clicking here. You can create and preview your own combinations of fonts and see results before you install. We highly recommend you to check this cool website.

Our last article was 25 High Quality Premium Magento Themes Collection. We recommend you to read it too. Click here

Post a Comment

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