<

Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x

Using Google Font API in CSS

Posted on
6,055 Points
55 Views
Last Modified:
Experience Level: Beginner
4:59
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
Comment
0 Comments

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month