<div class="su-sans">
  <h2>Source Sans Pro</h2>
  <p class="su-intro-text">Source Sans Pro is our primary sans-serif font. Source Sans Pro should be used in unit signatures alongside the Stanford wordmark and should be used as the primary sans-serif font in your print, web and social media communications. For
    situations where Source Sans cannot be used, use News Gothic or Gill Sans as fallback fonts.</p>
  <h3>Style Variations</h3>
  <div style="font-weight: 200; font-style: normal;">Extra-Light</div>
  <div style="font-weight: 200; font-style: italic;">Extra-Light Italic</div>
  <div style="font-weight: 300; font-style: normal;">Light</div>
  <div style="font-weight: 300; font-style: italic;">Light Italic</div>
  <div style="font-weight: 400; font-style: normal;">Regular</div>
  <div style="font-weight: 400; font-style: italic;">Regular Italic</div>
  <div style="font-weight: 600; font-style: normal;">Semi-Bold</div>
  <div style="font-weight: 600; font-style: italic;">Semi-Bold Italic</div>
  <div style="font-weight: 700; font-style: normal;">Bold</div>
  <div style="font-weight: 700; font-style: italic;">Bold Italic</div>
  <div style="font-weight: 900; font-style: normal;">Black</div>
  <div style="font-weight: 900; font-style: italic;">Black Italic</div>
</div>

<div class="su-serif">
  <h2>Source Serif Pro</h2>
  <p class="su-intro-text">Source Serif Pro is our primary serif font. Source Serif Pro should be used in headlines and body copy as the primary serif font in your web and social media communications. For situations where Source Serif Pro cannot be used, use Minion Pro or Times New Roman.</p>
  <h3>Style Variations</h3>
  <div style="font-weight: 200; font-style: normal;">Extra-Light</div>
  <div style="font-weight: 200; font-style: italic;">Extra-Light Italic</div>
  <div style="font-weight: 300; font-style: normal;">Light</div>
  <div style="font-weight: 300; font-style: italic;">Light Italic</div>
  <div style="font-weight: 400; font-style: normal;">Regular</div>
  <div style="font-weight: 400; font-style: italic;">Regular Italic</div>
  <div style="font-weight: 600; font-style: normal;">Semi-Bold</div>
  <div style="font-weight: 600; font-style: italic;">Semi-Bold Italic</div>
  <div style="font-weight: 700; font-style: normal;">Bold</div>
  <div style="font-weight: 700; font-style: italic;">Bold Italic</div>
  <div style="font-weight: 900; font-style: normal;">Black</div>
  <div style="font-weight: 900; font-style: italic;">Black Italic</div>
</div>

<div class="su-slab">
  <h2>Roboto Slab</h2>
  <p class="su-intro-text">Roboto Slab is a secondary font. Roboto Slab should only be used as a display font - it is not appropriate for blocks of text.</p>
  <h3>Style Variations</h3>
  <div style="font-weight: 300; font-style: normal;">Light</div>
  <div style="font-weight: 400; font-style: normal;">Regular</div>
  <div style="font-weight: 700; font-style: normal;">Bold</div>
</div>

<div class="su-handwriting">
  <h2>Kalam</h2>
  <p class="su-intro-text">Kalam is a secondary font.</p>
  <h3>Style Variations</h3>
  <div style="font-weight: 300; font-style: normal;">Light</div>
  <div style="font-weight: 400; font-style: normal;">Bold</div>
  <div style="font-weight: 700; font-style: normal;">Regular</div>
</div>

<div class="su-sanskrit">
  <h2>Noto Sans Devanagari (Sanskrit) Subset</h2>
  <p class="su-font-lead">Noto Sans is a secondary font. It should only be used when Sanskrit font support is needed.</p>
  <h3>Style Variations</h3>
  <div style="font-weight: 400; font-style: normal;">Regular</div>
  <div style="font-weight: 400; font-style: italic;">Regular Italic</div>
  <div style="font-weight: 700; font-style: normal;">Bold</div>
  <div style="font-weight: 700; font-style: italic;">Bold Italic</div>
</div>
