W3CSS Fonts

The last article dealt with text properties. In this article we shall explain W3CSS Fonts and different classes that are used to style font size and font styles. There are eight classes in total that can be used to style W3CSS fonts size. The are w3-tiny, w3-small, w3-medium, w3-large,w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo. The default class is w3-medium. Take a look at the following example to see each of them in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-tiny">This is tiny text</div>
     <div class="w3-small">This is small text</div>
     <div class="w3-medium">This is medium text</div>
     <div class="w3-large">This is large text</div>
    <div class="w3-xlarge">This is xlarge text</div>
    <div class="w3-xxlarge">This is xxlarge text</div>
    <div class="w3-xxxlarge">This is xxxlarge text</div>
    <div class="w3-jumbo">This is jumbo text</div>
    
</html>

Download the code Try the code

If you open the above page in browser, you shall see all the eight font sizes available in the W3CSS font classes.

It is very important to note here that you can override the default sizes in three sections i.e. in the header section, in the external style sheet and referring it after the W3CSS styles sheet or you can directly edit styles in the W3CSS library file. For instance the default size for h1 in W3CSS framework is 36 pixels. You can modify it.

Adding External Fonts to your page

Apart from available fonts, you can also add fonts from external source such as google fonts to your webpage. Simply add link to the external stylesheet for the font that you want to add. Give that font some name in the header section and use it in your program. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
    
<style>
    
    .w3-josefin{
        font-family: 'Josefin Sans', sans-serif;
    }
    
    .w3-rossoone {
        font-family: 'Russo One', sans-serif;
    }
</style>
    
</head>
    
<body>

    <div class="w3-josefin w3-xlarge">This is text with josefin font.</div>
    <div class="w3-rossoone">This is text with josefin font.</div>
 
</html>

Download the code Try the code

Pay very close attention to the above code. Take a look at the header section first. Here we have added to links to two external stylesheets for two different fonts. First is the josefin sans and the other is rosso one. Next, we created internal style in the header where we created two classes w3-josefin and w3-rossoone. The first class sets the font family to josefin sans font while the second class sets it it rosso one font. Inside the body we created two divs. First div has class w3-josefin and the second div has class w3-rossoone. If you open the page in browser you shall see that the text inside the first div is in josefin sans font while the text in the second div shall be in rosso one font.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .