20 Best Google Web Fonts

We’re experiencing a moment of great creativity in the use of web typography. Google Fonts is without doubt one of the most valuable resources, mainly due to the open source nature of its fonts, which allows for both personal and commercial use. Additionally, the quality of the selection is very high as it takes into account essential aspects of web and mobile typography, such as legibility and readability, and of course the accessibility that its own platform dedicates itself to.

The use of typography as a principal design element in the latest trends, means Google Fonts is now a more valuable resource than ever. Its interface and download system is very intuitive and comfortable, whilst allowing you to compare all the fonts and styles available to satisfy the current creative landscape that is fusing bold typography, serif and display fonts, big paragraphs, decorative-styles, and more. Read more about typography taking centre stage here Typography is the new black. Trends in web design

Top recommended Google Web Fonts

Here you can find a selection of fonts that we have chosen due to their aesthetic aspect, but above all functionality, containing families with many styles and weights.
We have highlighted fonts that are optimized for interfaces, UI Optimized web fonts, and others that are especially legible in paragraphs, or particularly comfortable for reading on mobile and legible on any device – be it smartphone, desktop or tablet.

  • KarlaKarla Google Fonts Web Fonts
  • LoraLora Google Fonts Web Fonts
  • Frank Ruhl LibreFrank Ruhl Libre Google Fonts Web Fonts
  • Playfair DisplayPlayfair Display Google Fonts Web Fonts
  • ArchivoArchivo Google Fonts Web Fonts
  • SpectralSpectral Google Fonts Web Fonts
  • Fjalla OneFjalla One Google Fonts Web Fonts
  • RobotoRoboto Google Fonts Web Fonts
  • MontserratMontserrat Google Fonts Web Fonts
  • RubikRubik Google Fonts Web Fonts
  • Source SansSource Sans Google Fonts Web Fonts
  • CardoCardo Google Fonts Web Fonts
  • CormorantCormorant Google Fonts Web Fonts
  • Work SansWork Sans Google Fonts Web Fonts
  • RakkasRakkas Google Fonts Web Fonts
  • Concert OneConcert One Google Fonts Web Fonts
  • Yatra OneYatra One Google Fonts Web Fonts
  • ArvoArvo Google Fonts Web Fonts
  • LatoLato Google Fonts Web Fonts
  • Abril FatFaceAbril Fatface Google Fonts Web Fonts
  • UbuntuUbuntu Google Fonts Web Fonts
  • PT SerifPT Serif Google Fonts Web Fonts
  • Old Standard TTOld Standard TT Google Fonts Web Fonts
  • OswaldOswald Google Fonts Web Fonts

Fonts Optimized for UI

  • PT SansPT Sans Google Fonts Mobile Fonts UI
  • PoppinsPoppins Google Fonts Mobile Fonts UI
  • Fira SansFira Sans Google Fonts Mobile Fonts UI
  • NunitoNunito Google Fonts Mobile Fonts UI
  • OxygenOxygen Google Fonts Mobile Fonts UI

Fonts Optimized for Legibility and Readability

  • Exo 2Exo 2 Google Fonts Mobile Fonts UI
  • Open SansOpen Sans Google Fonts Mobile Fonts UI
  • MerriweatherMerriweather Google Fonts Mobile Fonts UI
  • Noto SansNoto Sans Google Fonts Mobile Fonts UI
  • Source Sans ProSource Sans Pro Google Fonts Mobile Fonts UI

How to use Web Fonts

At this point everyone knows how to use web fonts, but if you’re not sure, you only need to know that there are two ways. The first is to use web fonts services like Google FontsWebtypeFonts.com or Typekit and download the font from their servers, as you’ll see in the following example: 1. Web font embedding services

The second is to host the font in your server and use @font-face rule in your stylesheet as you can see here: 2. Embedding fonts using the @font-face rule

Web font embedding services

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. GWF is free to use, does not require you to have an account, and has no limit on traffic or domains unlike Typekit. Typekit sets the cost of the service according to the number of domains in which the font is used, or the site’s monthly traffic. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase.

Implementation

It really is quick and simple:

1. Choose a font. You can add it to your collection or use “quick-use” to generate the code and options for that font.

2. Copy and paste the code generated into your <Head>

  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
  </head>

3. The font is now accessible in your CSS code

      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

Here you can consult a extended manual for styles, script subsets, and using multiple fonts.

Embedding fonts using the @font-face rule

Fonts are hosted on the user’s server independently of external services. @font-face was a deprecated CSS2 rule that has been re-introduced in CSS3 specifications and is supported by almost all modern browsers. A web font is a customized font which is supported by different browers and comes in formats such as TTF, WOFF, EOT and SVG.

     @font-face {
         font-family: 'ChunkFiveRegular';
         src: url('Chunkfive-webfont.eot');
         src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('Chunkfive-webfont.woff') format('woff'),
         url('Chunkfive-webfont.ttf') format('truetype'),
         url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
         font-weight: normal;
         font-style: normal;
}

Culled from Awwwards

    Leave Your Comment Here