<

Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x

Using Google Font API in CSS

Posted on
6,058 Points
58 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

Suggested Videos

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Suggested Courses
Course of the Month14 days, 9 hours left to enroll

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month