In this example we create a simple HTML containing a single
<div> element, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, Helvetica, for the text, and a serif font, Times New Roman, for the ampersand.
In the CSS we are in effect defining a completely separate
@font-face that only includes a single character in it, meaning that only this character will be styled with this font. We could also have done this by wrapping the ampersand in a
<span> and applying a different font just to that, but that is an extra element and rule set.
src: local('Times New Roman');
font-family: Ampersand, Helvetica, sans-serif;