---
title: Complete Guide to the Best Free Fonts
layout: default
body-class: index
body-head-content:
  <meta property='og:title' content='Complete Guide to the Best Free Fonts'>
  <meta property='og:image' content='https://beautifulwebtype.com/assets/images/card.png'>
  <link rel='preload' href='/assets/fonts/alegreya-sans/AlegreyaSans-Italic.woff2' as='font' type='font/woff2' crossorigin='anonymous'>
---

<div class='samples grid'>
  <div class='gr1 gc6 page-header center'>
    <h1>Guide to Only the Best Open-Source Typefaces</h1>
  </div>

  <div class='gr1 gc6 page-header asc center'>
    <p>There are {{ site.data.typefaces | size }} featured typefaces, with new ones added continously. Below are the latest 10.</p>
  </div>

  {% assign latest_typefaces = site.data.typefaces | sort: 'date-added' | reverse %}
  {% for typeface in latest_typefaces limit:10 %}
    {% include sample.html %}
  {% endfor %}

  {% assign pairings = site.data.pairings %}
  <h2 class='page-subhead gc1 gc12 ase'>Latest pairings</h2>
  {% for pairing in pairings %}
    {% include pairing-sample.html %}
  {% endfor %}
</div>

---
title: Complete Guide to the Best Free Fonts
layout: default
body-class: index
body-head-content:
  <meta property='og:title' content='Complete Guide to the Best Free Fonts'>
  <meta property='og:image' content='https://beautifulwebtype.com/assets/images/card.png'>
  <link rel='preload' href='/assets/fonts/alegreya-sans/AlegreyaSans-Italic.woff2' as='font' type='font/woff2' crossorigin='anonymous'>
---

<div class='samples grid'>
  <div class='gr1 gc6 page-header center'>
    <h1>Guide to Only the Best<br> Open-Source Typefaces</h1>
  </div>

  <div class='gr1 gc6 page-header asc center'>
    <p>There are {{ site.data.typefaces | size }} featured typefaces, with new ones added continously. Below are the latest 10.</p>
  </div>

  {% assign latest_typefaces = site.data.typefaces | sort: 'date-added' | reverse %}
  {% for typeface in latest_typefaces limit:10 %}
    {% include sample.html %}
  {% endfor %}

  {% assign pairings = site.data.pairings %}
  <h2 class='page-subhead gc1 gc12 ase'>Latest pairings</h2>
  {% for pairing in pairings %}
    {% include pairing-sample.html %}
  {% endfor %}
</div>

Improve break on home page headline
Improve break on home page headline
