Internet Fonts

As a web developer, we all understand that the one constant is that every user will get a different experience from our web sites. As hard as we try to give everyone the same site, the difference in browser, operating system and internet speeds makes this troublesome at best.

Even a simple thing such as a font can throw the whole styling out of whack. At best a font close to the one chosen will be available, but sometimes a change in a font can knock the layout off.

We can’t know for certain which fonts are available to every user. One option is to host our own fonts and download the fonts we want to use for that page. This is great but that means the page will load slower and it’s more bandwidth we need to provide.

Another option is to let Google hosts the fonts for us. Not only will this lighten our bandwidth bill, Google most likely will have the font stored on a server closer to the user to make the download faster. They do have server all over the world.

Google Fonts

Currently there are about 900 font families on the Google Font site. With most fonts having multiple font weights and styles to chose from.

Home Page

The main page for Google Fonts gives a short editable example of each font. On the right hand side is filters to drill down to exactly the font you want. For each font you’re given choices for what type of text you want to see, plus what style and weight you want to sample.

Image of Google Font's start page

At the bottom of the font example is ‘SEE SPECIMEN’ link. This will take you to a page with more information concerning the font. Including history and other similar fonts.

Choose fonts

After choosing a font, you’ll need to customize the font to include the weight and style that you want to use.

Image of Google Font's selection page

Selecting multiple fonts, Google Fonts will combine them into a single line to add. Using the Customize option, multiple weights can be added. By limiting the number of font styles and weights, the download size can be kept at a minimum.

Grab the whole thing

The entire Google Fonts collection is hosted on Github. From there you can grab the entire library and download it out your computer. The advantage is you can still use the fonts with poor internet service while working on your web site.

Or if you are creating hybrid apps in Ionic or similar technology you can include the fonts in the app package.

Resources

Google Font’s home page Google Fonts

Google Font’s Github Repo Google Fonts on Github

Mark Lassoff explains Google Font HTML Authoring 006 | Certified HTML5 Specialist Program

Design Shack’s blog post about Google Fonts A Beginner’s Guide to Using Google Web Fonts

Google’s Getting Started with Google Fonts Getting Started