Blog Post: Using Google Fonts

Red Deer & Blackfalds Web Design Writes:

A huge part of having a creative and custom webpage is being able to utilize CSS in an effective manner. As discussed previously, CSS (Cascading Stylesheets) are utilized to give your site colours, fonts, layouts, responsiveness, and overall originality. Now in order to encompass everything there is to know about building an original site you need to know the ins and outs of how to properly utilize elements to make your site stand out! One of the most popular ways to do this is by picking original fonts, ideally by utilizing Google Fonts.

But how do you do it? Good question! Here’s a rundown of what you need to do in order to capitalize on this vast database of quality fonts made to use on your digital platform:

  1. Choose your font – using the link above, choose the font you wish to have on your webpage and then click on the little icon of the arrow pointing to the right, that hovers “Quick Use”
  2. Copy the code – this will open a new screen from which you want to scroll down and select “@import” and then copy that code into your CSS file. It may look something like this:
  3. @import url(http://fonts.googleapis.com/css?family=Open+Sans);

  4. Reference it in CSS – in order to apply this font you can set it as a default (as seen below in the first example) or specify it to be utilized only when the class is called by copying these bits of code into your CSS (also seen below, using the class name “opensans” that can be applied inside the tags p or h tags when writing your HTML)
  5. p, h1, h2, h3, h4, h5, h6 {font-family: 'Open Sans', sans-serif;}

    p.opensans, h1.opensans, h2.opensans, h3.opensans, h4.opensans, h5.opensans, h6.opensans {font-family: 'Open Sans', sans-serif;}

At the time of this article, over 600+ fonts are being offered through Google for use on your website! Be weary of utilizing too many custom fonts as it can slow down the load time of your page; however, choosing one or two is a great way to set your site apart from your competitors who may be using a similar framework!

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)