Using Google Fonts on Your Website

Early this year I was researching the availability of any open source fonts that were out there.  To my surprise I found that Google offers high quality open source fonts that have been created and distributed by font designers.  The fonts in the directory are all released under open source licenses, which can be used for noncommercial or commercial projects.  With minimal effort they are ready to use on your website projects and to download for use with your computer applications.  In this article, I’m discussing how to use these fonts for webpages only.  For web design you require a small amount of knowledge regarding CSS(cascading style sheets), and you can find CSS answers to your questions on the internet.  The fonts are compatible with most browsers.  Currently there are a total of 703 font families to choose from in five categories; serif, sans serif, display, handwriting and monospace.

Log into your Google account.

  • Open another tab and copy this URL https://developers.google.com/fonts/
  • Click on “GET STARTED WITH FONTS API”, which is near the bottom of the page
  • This guide explains how to use the Google Fonts API and start adding fonts to your webpage.
  • Scroll to the bottom of the page, under the title “Further Reading” and click on Google Fonts located in the first bullet point.
  • This is the entire catalogue of fonts that are available.
  • Select the fonts you would like to use for your webpages by clicking on the “Add to Collection” buttons.
  • Once you’ve selected your collection of fonts, click on the bookmark button at the top of the page.  Bookmark Button
  • Copy the bookmark link so that you can return to your font collections later and close the box.
  • At the bottom of the page on the right-hand side, click on the “Use” button.
  • Go to point 3 under standard and copy and paste this code between the head tags; <head> and </head> of your html file.  This is an external CSS link that has all of your font collections in it.  It goes to Google Fonts for verification.
  • Now it’s time to build your own CSS. There are three ways that CSS can be created;

External:  It is a separate file from your HTML file with the extension of .css.  Each page must include a reference to the external style sheet inside the <link> element and between the head section.  I personally prefer this method when doing large websites.  With an external style sheet, you can alter the look of an entire website by changing just one file, and it updates immediately on all of the pages that are linked to that style sheet.   My thoughts are anything that improves efficiency and duplication of effort is always a better way to go.

Internal:  This is used if one single page has a unique style.  They are defined within the <style> element, and inside the head section of the HTML page.

Inline:  To use inline styles, add the style attribute to tags within the HTML file.  In this example the <h1> element is used:

This is a link to my own website where I experimented with a few of the different Google Fonts.  They rendered perfectly on the most updated versions of Safari and Chrome

Intelligent Business Services | Google Fonts

This is an example of an internal style sheet.  It has the link reference for two font families that were copied from Google.  The <style> element contains the attributes for these font families.

<head>

<link href=”https://fonts.googleapis.com/css?family=Tangerine|Fondamento” rel=”stylesheet” type=”text/css”></link>

<style>
h1{
font-family: ‘Tangerine’, Times, Cursive, serif;
font-size:32px;
font-weight:400;
}

p{
font-family: ‘fondamento’, Times, Cursive, serif;
font-size:14px;
font-weight:400;
}
</style>
</head>

Stay tuned for Part 2:  Downloading Google Fonts to Use With Your Computer Applications.

Posted in Fonts, Web Design | Leave a comment

Mobile Website Design – Attracting the Widest Audience

Spring is the time we start thinking about making changes to our house, property, etc. Perhaps your Spring project is to update or create a new business website. Here are a few ideas to keep in mind:

Today’s audience is to a large part comprised of people who own tablets and or smartphones. Along with your marketing campaigns that you have worked very diligently on, a website that has been optimized for the best viewing experience on all devices will draw the largest demographics of traffic to your site.

Adobe Flash technology used too much memory and ate battery life on mobile devices. Apple’s Steve Jobs was very insightful and led the way in stopping the dependency on Flash by excluding it on iOS devices, i.e., iPhone, iPad, iPod Touch.  In many cases website developers have discontinued the use of Flash in favour of HTML5 or their own custom built apps.  This is important to consider when designing or redesigning your website.

A busy website is very difficult to navigate.  Very often people will simply give up and go to another site.  By ensuring the navigation is easy to follow, the home page content is dynamic and explicitly describes what your website is about will ensure that a potential customer stays longer on your website.

Have fun and make your website a true reflection of your company.

Posted in Marketing | 1 Comment