<html>
<head>
  <!-- \/ This is how to import google font into HTML \/ -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
</head>

<body>
  <h1>Text Formatting</h1>
  <p>This text is styled with some of the text formatting properties. The heading uses the text-align, color, letter-spacing, font-family and font-weight properties. The paragraph is indented, aligned, and the space between words and line-height are specified. The <a target="_blank" href="https://codepen.io/alexpeach/pen/xOdLpg">link</a> is bold and default underline is removed.
  </p>
  <hr>
  <H1 class="htmlGoogleFont">Fonts</H1>
<p> The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.</p>

<p>Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.</p>

<p class="uppercase">Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
</p>

<p class="example">
    Example:  <br>
font-family: "Times New Roman", Times, serif;
  </p>
</body>

</html>
/* This is how you can import Google fonts into your CSS */

@import url(https://fonts.googleapis.com/css?family=Monofett);
body {
  background: AntiqueWhite;
}

h1 {
  text-align: center;
  color: hotpink;
  letter-spacing: 15px;
  font-family: 'Monofett', Arial, cursive;
  font-weight: 500;
}

p {
  text-indent: 25px;
  text-align: justify;
  word-spacing: 2px;
  line-height: 1.8;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: HotPink;
}

a:hover {
  text-shadow: 1px 1px red;
}

.htmlGoogleFont {
  font-family: "Lobster", Helvetica, Sans-serif;
  color: red;
  text-transform: uppercase;
  text-shadow: 2px 3px #FF7F50;
  letter-spacing: 10px;
}

p.uppercase {
  text-transform: capitalize;
  font-style: oblique;
}
p.example {
  padding-left: 25px;
  background: #FF7F50;
  font-weight: bold;
  font-style: italic;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.