Here we review eight Google Fonts that stand out from the rest and that you can easily use on your website. These fonts have features that you might not have even heard of before but which can really add character to your website or documents.

You might not have been aware that this fantastic web resource—Google Fonts existed. Well Google Fonts is a searchable, interactive collection of fonts that you can use and download for free.

Google-Fonts

Google Fonts is really great for the following reasons…

  • Free fonts. For those Calibri-users new to the field of typography (Calibri isn’t a bad font, it’s just stock standard), free fonts (free good fonts) is a big deal. Good full-featured fonts like we’re going to show you can cost hundreds of dollars each and that is no exaggeration considering how the font designer must meticulously craft each character of each style of each font.
  • Free font hosting. Another really big deal. ’Hosting’ is something that usually costs you money, unless a big player like Google offers it for free. It’s when a company holds some data (e.g. a font) on their servers which you can access through a URL. This means that you can use any of the Google Fonts on your website just by linking to them (as we will demonstrate). You don’t have to store anything on a computer that’s constantly running.
  • Beautiful new interface. Google Fonts’ new (2016) interface is really something to see. Minimalistic, efficient, colour-palleted, interactive, HTML5—if you want some web design inspiration, you should have a look. It makes it very easy to preview fonts, pair and compare them.
  • Easily find what you have in mind. Google doesn’t dissapoint when it comes to search capabilities. Easily filter your results if you want all Serif fonts, a certain language, a high number of styles, etc. (We specified that we wanted fonts with a high number of styles when curating this list.)

Also, if you’re a ’type-geek’ and want even more features than Google Fonts provides, here is a website for browsing the Openttype features of the Google Fonts.

What are some of these terms I’ve been hearing?

Here’s a quick summary of some font terms that are useful to know:

  • Openttype: the newest popular font format, with a .otf or .otc extension (or sometimes just the regular .ttf, .ttc extensions unfortunately) on its font files. Some Openttype fonts have impressive features that you might not be aware of like small caps (capitals which have the same height as lower-case chars) and tabular figures (each character has the same width).
  • Styles/Font variants/Weights: alternative forms of the font like bold, italics, small caps, tabular, etc.
  • Serif vs Sans Serif: Serif fonts contain more detail, Sans Serif (sans) fonts are more minimal.

serif-vs-sans

For more information, read our article on typography.

How do I embed Google Fonts on my site?

One of the key benefits of Google Fonts is that it’s fonts are hosted. All you have to do is put a link to the font in your website’s code (aarrrh code! But have no fear, it’s a copy-and-paste job). Here’s a brief guide to this brief task:

  • Using Google Font’s UI: Select font/s > Customise the font variants and languages > Copy and paste the two blocks of code from here.
  • The first block looks like this:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Taviraj:100,100i,200i,300,400,500i,700i,900,900i" rel="stylesheet">

Insert this between thetags within the HTML code of your webpage

  • The second block looks like this:
font-family: 'Open Sans', sans-serif;
font-family: 'Taviraj', serif;

Insert this within the CSS of your webpage. CSS is either embedded in your webpage within

tags or in a seperate .css file. You can insert it into CSS like this:

body {
font-family: 'Open Sans', sans-serif;
font-family: 'Taviraj', serif;
}

That’s it, now the part of the page you specified in your CSS (in this case the ’body’) will use this typeface.

So here’s the list of our favourite Google Fonts…

Open Sans

Open-Sans
One of the most iconic and the best Google Fonts. This comprehensive font includes 10 styles. It’s an upright, sans fontwhich works well on screens and paper, for any formal or informal purpose. For an all-round, go-to Calibri/Times New Roman replacement, Open Sans is one to consider.

It also supports some Openttype features like tabular figures, oldstyle figures and other things to play around with if you’re into type as much as we are. (Many of these fonts provide Openttype features which aren’t stated in the Google Fonts interface. They can be viewed on this website.)

Lato

Lato
Another 10-style, upright, sans font. This one has slightly more of an air of formality as it was originally designed for a large corporate client.

It should be noted that most of the Google Fonts are sans, because this style is easier for reading on screens. In contrast, serif fonts are easier to read on paper.

Ubuntu

Ubuntu
This is the font used for the GUI across the Ubuntu operating system. It is designed for clarity and to have a modern feel. It is an 8-style sans font which really takes the minimalism of Sans Serif to new heights by truncating some of the usual ornaments of letters that aren’t really needed for legibility e.g. the cross on the ’t’ only goes across half of the way.

There is also an Ubuntu monospace and condensed font available.

Droid

Droid
Droid is the font used in the GUI of the Android OS. It comes in sans, serif and mono font variants, each with different numbers of styles.

Like the above, it is optimised for clarity, but the sans and especially the serif variants are better optimised for long passages than Ubuntu which is better for headings, button text, etc.

Fira

Fira
The font used for the Mozilla FirefoxOS. Designed to be legible at a variety of sizes. Fira is another clean, modern, sans option to be considered in the same vein as the above. The careful alignment and variation in its characters is much lauded by typographers.

Raleway

Raleway
Raleway is one of the few Google Fonts which are tied in the position of having the most font styles. Raleway has 18 styles from ’Thin’ to ’Black Italic’.

Raleway is a sans font intended for headings and usage at large font sizes. It has an elegant, airy feel.

Source Code Pro

Source-Code-Pro
A monospace font that has won the hearts of many coders (it is the font yours truly is typing in right now). Rounded, easy-on-the-eyes characters, comprehensive Unicode support (it includes lots of special symbols that many other fonts can’t type) and a fantastic slew of Openttype features.

Source Sans Pro and Source Serif Pro

Source-Sans-Pro
All of the above plus a serif version, plus even more Openttype features. This is one of the most full-featured fonts we’ve ever encountered and a worthy Source Code Pro alternative.

Fonts are the appearance of your content—whether on the web or the printed document. They have the power to impress, to surprise, to delight and certainly to make an impression. If you were struck by the beauty of any of the fonts featured or of the Google Fonts website as much as we were, then you certainly understand the enormous potential that lies in simply changing the font.

Leave a comment