Now that you know how to create custom fonts, let's see how you can style them.

Open your HTML file, and start with a <span> tag for three words. Also, create a class called highlight associated with it. Next, we'll use the same class for another word in a different paragraph, something like so:

<p class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <span class="highlight">cillum</span> dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <span class="highlight">dolore</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Now, go to styles.css, and define the .highlight class. As the name suggests, these elements highlight the words.

Make the background color yellow, and the font-weight 600 to increase its boldness. For the font-style, italics are also an option. Usually, I limit my tools to this handful, but here, we will learn all possible attributes.

The next one is font-variantwhich we set a value called small-caps. As the name suggests, this will change the highlighted text to uppercase, and will also reduce its size when compared to the normal font size. Another one is text-transform that will change all the letters to uppercase. Now, the inclusion of both of these options is nonessential, however, all ways are still presented to you.

The code so far is:

.highlight {
  background-color: yellow;
  font-weight: 600;
  font-style: italic;
  font-variant: small-caps;
  text-transform: uppercase;
}

Another option is text-decoration that can take options such as underline, overline and line-through. All of which are able to be combined if desired.

The last one is text-shadow, it lays a shadow effect around chosen words. It has four parameters.
1. Offset value for the x-axis
2. Offset value for the y-axis
3. Thickness of the shadow
4. Shadow Color

.highlight {
  background-color: yellow;
  font-weight: 600;
  font-style: italic;
  font-variant: small-caps;
  text-transform: uppercase;
  text-decoration: underline line-through overline;
  text-shadow: 5px 0 1px #b02626;
}

So, that's how you can style your fonts using CSS.