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.

About leighroyal

Supplying Virtual Administrative Support - At Intelligent Business Services we understand how essential it is to keep your business up-to-date and organized, so that you can concentrate on what you do best. We are entrepreneurs who typically maintain a 'state of the art' office complete with up-to-date hardware and software connected by a high-speed Internet service. Having these resources at hand is only part of the solution. In-depth knowledge of these tools, a creative mindset plus keeping on top of new software are also necessary virtues. Your Virtual Assistant specializes in providing support services virtually through this technology utilizing a myriad of methods, i.e., Internet Cloud storage, FTP, Skype, Email, Fax, Web Meetings, etc.... Recognized for using sound judgment, wisdom and analytical skills to determine the best course of action. Excellent verbal and written communicator, who negotiates with customers/vendors to achieve a ‘win-win’ outcome. Demonstrates a strong work ethic and ability to meet deadlines and exceed expectations.
This entry was posted in Fonts, Web Design. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s