W3.CSS Fonts
Making the web beautiful!
With W3.CSS it is extremely easy to add new fonts to a web page.
- Very easy to use (only CSS and HTML)
- Unlimited use of external font libraries (Like Google Fonts)
- Works in all modern browsers
Using a Font Class
Making the Web!
In the head of your web page (or in your style sheet), create a font class:
Example
.w3-myfont {
font-family: "Comic Sans MS", cursive, sans-serif;
}
In the body of your web page, use the class name:
Using External Fonts
In the head of your web page, include an external font, and give the font a class:
Example
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.w3-tangerine {
font-family: 'Tangerine', serif;
}
</style>
In the body of your web page, use the class name:
More Examples
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=brick-sign">
Try It Yourself »
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Try It Yourself »
Font effects does not work in Internet Explorer 9 and earlier.
Changing the Page Font
In the head of your web page (or in your style sheet), after you have loaded w3.css, change the style of html and body:
Example
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<style>
html , body {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
Try It Yourself »