<div class="container">
  <p>Change the font family of the following text to see how it changes its rendering.</p>
  <div class="element">
    <p class="first">My font family name is "Dekko" and I fall back to a cursive generic font.</p>
    <p class="second">I have been given a list of font family names, the first one in the list is an invalid name, so I fall back to "Times New Roman".</p>
    <p class="third">My font family is "Courier" and falls back to a monospace generic font.</p>    
  </div>
</div>
@import url(http://fonts.googleapis.com/css?family=Dekko);

* {
  box-sizing: border-box;
}

body {
  background-color: #f6efe7;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  background: #fff;
  padding: 1em;
}

.element p {
  font-size: 1.25em;
  background: #3c5567;
  color: white;
  padding: 1em;
  margin: 1em;
}

.first {
  font-family: 'Dekko', cursive;
}

.second {
  font-family: wrong name, "Times New Roman", serif;
}

.third {
  font-family: Courier, monospace;
}