CSS - Fontes

Tamanho do texto

<!-- index.html -->
<!-- Head starts -->
<style>
  .big-text {
    font-size: 50px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<p class="big-text">Big Text!</p>
<!-- Body ends -->

Familia da fonte

<!-- index.html -->
<!-- Head starts -->
<!-- Google fonts import start -->
<link
  rel="preconnect"
  href="https://fonts.googleapis.com"
>
<link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossorigin
>
<link
  href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
  rel="stylesheet"
>

<!-- Google fonts import end -->
<!-- Style block start -->
<style>
  .monospace {
    font-family: monospace;
  }

  .poppins {
    font-family: "Poppins";
  }
</style>
<p class="monospace">Monospace font family</p>
<p class="poppins">Poppins font family from Google Fonts</p>
<!-- Body ends -->

Fonte padrão

<!-- index.html -->
<!-- Head starts -->
<!-- Google fonts import start -->
<!-- Google fonts import end -->
<!-- Style block start -->
<style>
  /* sans-serif will be used if Poppins not found  */
  .fallback-font {
    font-family: "Poppins", sans-serif;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<p class="fallback-font">Sans-serif font fallback if Poppins font not found</p>
<!-- Body ends -->

Google Fontes

<!-- index.html -->
<!-- Head starts -->
<!-- Google fonts import start -->
<link
  rel="preconnect"
  href="https://fonts.googleapis.com"
>
<link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossorigin
>
<link
  href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
  rel="stylesheet"
>
<!-- Google fonts import end -->
<!-- Style block start -->
<style>
  .poppins {
    font-family: "Poppins";
  }
</style>
<p class="poppins">Poppins font family from Google Fonts</p>
<!-- Body ends -->