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.
- 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.
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.
No comments:
Post a Comment