Using Google Fonts — IT’S FREE, Why not!?!

Once Upon a Time… there was this project that lost all the fancy fonts that made it look pretty and appealing to the users. It happened while I was away from the office enjoying my days off. I was lucky enough to have one of my teammates take action immediately and he requested an extension to the third-party fonts provider. (thanks Kaue Ribeiro)

When I was notified of the incident, I knew right away that I needed to find an alternative to replace the third-party fonts and prevent this issue from happening again. That’s when I thought of turning to Google Fonts. It’s a free option offered by the biggest company in the development industry… so, why not explore it and get the most out of it.

At first, I thought that integrating Google Fonts would be a painful process because not many developers use them but to my surprise it was by far the most pleasant and easy experience that I have had while working with non-standard web fonts. I started by checking out the fonts that are available and I found lots of options. It took me longer to find similar fonts to those that we were using than the actual implementation of them.

Then I took a quick look into the Getting Started Guide that Google provides and that was enough to replace the third-party fonts that were in place. The most surprising moment was when our internal client and designer saw them implemented and were happy with the result.

Here are the simple steps that I followed for the implementation:
1. Add a stylesheet link to request the desired web font:

<link href=’//fonts.googleapis.com/css?family=Pathway+Gothic+One’ rel=’stylesheet’ type=’text/css’>

2. Style an element with the requested web font in a stylesheet:

h1{
font-family: ‘Pathway Gothic One’, ‘Trebuchet MS’, Helvetica, sans-serif;
}

And the Google Fonts lived in this project Happily Ever After…

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.