November 30, 2016

Materialize Typography

Materialize Typography Roboto 2.0 standard font is used in Materialize framework. Here in this tutorial we are going to explain headings, blockquotes and free-flow text. You can also use our online demo to edit and run the code online.

Materialize Typography

Sometimes we do not need the default Roboto font so we need to override/remove the default Roboto font. You can remove the roboto font simply as below –

Remove | Override Roboto

[su_divider top=”no” size=”2″ margin=”5″]

You can remove the roboto the simple css as –

Materialize Typography | Remove | Override Roboto | Example:

html {
    font-family: GillSans, Calibri, Trebuchet, sans-serif;
  }

Headings

[su_divider top=”no” size=”2″ margin=”5″]

Materialize provides basic styling for the headings. There are following heading styles available –

Materialize Headings | Example:

<h1>Heading H1</h1>
<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
<h5>Heading H5</h5>
<h6>Heading H6</h6>

Try it »

If you run the above example it will produce output something like this –

Blockquotes

[su_divider top=”no” size=”2″ margin=”5″]

Blockquotes gives emphasis to a quote or citation. Here is an example of blockquote in Materialize-

Materialize Blockquote Example:

 <blockquote>
      This is quotation Blockquote tag Example.
    </blockquote>

Try it »

If you run the above example it will produce output something like this –

Flow Text

[su_divider top=”no” size=”2″ margin=”5″]

Add the class flow-text to the body of text as in the example given below –

Materialize Flow Text Example:

 <p class="flow-text">
      This is dummy text.This is dummy text.
      This is dummy text.This is dummy text.
      This is dummy text.This is dummy text.
      This is dummy text.
 </p>

Try it »