目录

W3.CSS Google Fonts

❮ Previous Next ❯

With W3.CSS it is extremely easy to add new fonts.

Very easy to use (only CSS and HTML)
Unlimited use of external font libraries (Like Google Fonts)
Works in all modern browsers

This is Roboto

This is Sofia

Sofia on Fire

Making the Web!

Making the Web!

Making the Web!

Making the Web!

Making the Web!

Using Google Fonts

Google Fonts are free to use, and have more than 1000 fonts to choose from.

In the head of your web page, link to a Google font:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

Then add the CSS about where to use it:

body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}

Try It Yourself »

Another Example

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}

Try It Yourself »

Create a Font Class

In the head of your web page, link to a Google font:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

Then create a font class:

Example

.w3-sofia {
font-family: Sofia, cursive;
}

In your web page, use the font class:

Example

<p class="w3-sofia">Making the Web!</p>

Try It Yourself »

Making the Web!

Example

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

.w3-tangerine {
font-family: 'Tangerine', serif;
}

<p class="w3-tangerine">Making the Web Beautiful!</p>

Try It Yourself »

Making the Web!

Example

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">

Try It Yourself »

Making the Web!

Example

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">

Try It Yourself »

Making the Web!

Example

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">

Try It Yourself »

Making the Web!

❮ Previous Next ❯