4:58
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS
Video Steps
1. Go to the Google Fonts website at google.com/fonts
2. Browse or search based on font properties or name to find a suitable font for your website. Preview custom text by typing in the "Preview Text" box and adjusting the size
3. To select a font for usage, click the blue "Add to Collection" button
4. You can select more than one font to create a font suite for your website but this will increase load time
5. Once all fonts are selected, click the "Use" button in the grey "Collection" box
6. Select the styles and character sets to embed in your website. More styles will increase load time, so only select those you will use
7. Copy the "Standard" code and paste it into the <head> of your webpage. If you're using a master stylesheet, you can open the CSS referenced in a new window and copy the CSS into your master stylesheet
8. Integrate the font into your CSS by defining any element's "font-family:" property as the font name
9. For maximum compatibility, define a back-up font after the Google font's name
0 Comments
Suggested Videos
| Title | Views | Activity |
|---|---|---|
| Creating Scalable Full-Page Backgrounds in CSS3 | 144 | |
| Creating Scalable Full-Width Header in CSS3 | 568 | |
| Custom List Bullets in CSS | 246 | |
| Drop-Cap Effect in CSS | 90 |
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible.
Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Suggested Courses
Next Video:Changing Text Highlight Color in CSS