Skip to content

Commit

Permalink
docs(typography): update how to change the font stack
Browse files Browse the repository at this point in the history
I'm still wondering why the font section have been deleted...
See : https://git.io/JK9is

Closes materializecss#175
  • Loading branch information
LoganTann authored and DyegoCosta committed Jun 27, 2022
1 parent 84a4547 commit edf4428
Showing 1 changed file with 19 additions and 0 deletions.
19 changes: 19 additions & 0 deletions pug/page-contents/typography_content.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,25 @@
<div class="col s12 m8 offset-m1 xl7 offset-xl1">

<div class="section">
<div id="roboto" class="scrollspy">
<h2 class="header">Roboto</h2>
<p class="caption">
The standard font Material Design uses is Roboto. We have included the font files with our framework.
</p>
<div class="row">
<p class="col s12 m4">We bundle our framework with the latest iteration of Roboto Google has released. It comes with 5 different font weights you can use: 100, 300, 400, 500, 600.<br> <br> Here is an image from Google's Roboto Specimen document displaying the different font weights.</p>
<img class="col s12 m8" src="https://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7SW9CUzR4MnRpOTg/style_typography_roboto1.png">
</div>

<h4>Removing Roboto</h4>
<p>In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the code below to your liking and add it to your custom css.</p>
<pre><code class="language-css">
html,
button, input, optgroup, select, textarea {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}
</code></pre>
</div>

<div id="headers" class="section scrollspy">
<h3 class="header">Headers</h3>
Expand Down

0 comments on commit edf4428

Please sign in to comment.