How To Add Google Web Fonts To Your Website

I’m not sure how many of you remember this, but I remember a time when on the internet, we had a choice of about four fonts to use. Yes, you could embed fonts in your html, but it wasn’t wise. We were limited by browser support, page loading times, font licensing and lack of standards.

Typekit Font Library, Handy But Pricey

I remember when Typekit first came out. Basically they had a wide variety of fonts to choose from. You didn’t need to embed the font in your page, all you had to do was place a snippet of code in your html code. The only downside was that it was $50 per year. Don’t get me wrong, it’s still a great service, and if you have a big budget and specific font related needs, it may be worth the money. But most of us aren’t on a large budget.

The Best Way To Implement Non-Standard Fonts Such As Roboto Font

So now, along comes Google and basically does the same thing as Typekit, except they give it away for free. So if you’re wanting a non-standard font, such as Google’s Roboto font, this is the best way to implement it. Lets Say You Want to install the Roboto font via Google Web Fonts, here is how you would do it.

Go to the Google Web Fonts page.

  1. Scroll down until you see the font you want. In this case, you’ll select Roboto. And click ‘Add To Collection’.Adding Roboto Font via Google Web Fonts
  2. When the blue box pops up, on the right hand side, select the ‘Use’ button.How To Install Roboto Font via Google Font Library
  3. Copy and paste the code in the <head> section of your HTML code. In the case for Roboto it would be: Roboto Font via Google Font Library Step 3
  4. Finally you will just add Roboto to your CSS styles, just like you would with any other font you’d use. For example you would add:

h1 { font-family: ‘Roboto Condense’, Arial, serif; font-weight: 400; }