TryIt Editor v2.0 - How to Import Google Fonts in CSS File

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
      @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
      body {
        font-family: 'Muli', sans-serif;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 400;
        line-height: 1.58;
        letter-spacing: -.003em;
        font-size: 20px;
        padding: 70px;
      }
      h1 {
        font-family: 'Quicksand', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 38px;
        line-height: 1.15;
        letter-spacing: -.02em;
        color: rgba(0, 0, 0, 0.8);
        -webkit-font-smoothing: antialiased;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>