Latest web development tutorials
 

W3.CSS Fonts


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:

Example

<body>
  <p class="w3-myfont">Making the Web!</p>
</body>
Try It Yourself »

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:

Example

<body>
  <p class="w3-tangerine">Making the Web!</p>
</body>
Try It Yourself »

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 »