Materialize Tutorial on Materialize Typography
materialize uses roboto 2.0 as a standard font. it can be overridden using the following css style.
html {
font-family: gillsans, calibri, trebuchet, sans-serif;
}
following are the examples of headings, blockquotes and free-flow but responsive text.
example
<!doctype html>
<html>
<head>
<title>the materialize typography example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body class="container">
<h2>typography demo</h2>
<hr/>
<h3>headings</h3>
<div class="card-panel">
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h6>heading 6</h6>
</div>
<h3>block quotes</h3>
<div class="card-panel">
<blockquote>
the latest versions of apple safari, google chrome, mozilla firefox, and opera all support many html5 features and internet explorer 9.0 will also have support for some html5 functionality.
</blockquote>
</div>
<h3>responsive free-flow text</h3>
<div class="card-panel">
<p class="flow-text">
the latest versions of apple safari, google chrome, mozilla firefox, and opera all support many html5 features and internet explorer 9.0 will also have support for some html5 functionality.
</p>
</div>
</body>
</html>
output
verify the output.
