<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Using Google Font API in CSS

Posted on
6,064 Points
64 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

Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Join & Write a Comment

Suggested Videos

Title Views Activity
Alpha Transparency in CSS 58
Corner Ribbon Effect in CSS 284
Drop-Cap Effect in CSS 69
Introduction to CSS (Part 1) 78
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month