W3.CSS Google Fonts
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;
}
font-family: Sofia, cursive;
}
In your web page, use the font class:
Making the Web!
Example
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
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 »
href="https://fonts.googleapis.com/css?family=Lobster">
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Try It Yourself »
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Try It Yourself »
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Making the Web!