W3.CSS — Fonts

Font Sizes

W3.CSS provides font size classes:

<p class="w3-small">Small text</p>
<p class="w3-medium">Medium text</p>
<p class="w3-large">Large text</p>
<p class="w3-xlarge">Extra large text</p>
<p class="w3-xxlarge">XX large text</p>
<p class="w3-jumbo">Jumbo text</p>
<p class="w3-medium w3-center">Medium centered text</p>

Font Families

<!-- Serif font -->
<p class="w3-serif">Serif font</p>

<!-- Sans-serif font -->
<p class="w3-sans-serif">Sans-serif font</p>

<!-- Monospace font -->
<p class="w3-cursive">Cursive font</p>

<!-- Fantasy font -->
<p class="w3-fantasy">Fantasy font</p>

Font Styles

<!-- Italic -->
<p class="w3-italic">Italic text</p>

<!-- Bold -->
<p class="w3-bold">Bold text</p>

<!-- Underline -->
<p class="w3-underline">Underlined text</p>

<!-- Strikethrough -->
<p class="w3-strike">Strikethrough text</p>

<!-- Code -->
<p class="w3-code">Code text</p>

Font Weight

<p class="w3-serif w3-light">Light weight text</p>
<p class="w3-serif w3-medium">Medium weight text</p>
<p class="w3-serif w3-bold">Bold weight text</p>
<p class="w3-serif w3-wide">Wide letter spacing</p>

Font Examples

<!-- Heading with custom font -->
<h1 class="w3-jumbo w3-text-blue w3-serif">Custom Heading</h1>

<!-- Paragraph with styling -->
<p class="w3-large w3-serif w3-wide">
    This is a large, serif font with wide letter spacing.
</p>

<!-- Code block -->
<div class="w3-code">
    function hello() {<br>
    &nbsp;&nbsp;return "Hello World";<br>
    }
</div>

Font Size Classes

Class	Description
w3-small	Small text
w3-medium	Medium text
w3-large	Large text
w3-xlarge	Extra large text
w3-xxlarge	XX large text
w3-jumbo	Jumbo text

Mini Practice

Create HTML code that:

1. Uses different font sizes
2. Applies font families
3. Adds font styles like italic and bold
4. Creates a styled heading

Up Next

Next: Learn about W3.CSS Text.