<h1 class="auto">font-display: auto</h1>
<h1 class="block">font-display: block</h1>
<h1 class="swap">font-display: swap</h1>
<h1 class="optional">font-display: optional</h1>
<h1 class="fallback">font-display: fallback</h1>

Örnek kod: <a href="https://developers.google.com/web/updates/2016/02/font-display">https://developers.google.com/web/updates/2016/02/font-display</a> alınmıştır.
@font-face {
  font-family: "Arvo-auto";
  font-display: auto;
  src: local("Arvo"),
    url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2)
      format("woff2");
}
@font-face {
  font-family: "Arvo-block";
  font-display: block;
  src: local("Arvo"),
    url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2)
      format("woff2");
}

@font-face {
  font-family: "Arvo-swap";
  font-display: swap;
  src: local("Arvo"),
    url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2)
      format("woff2");
}

@font-face {
  font-family: "Arvo-optional";
  font-display: optional;
  src: local("Arvo"),
    url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2)
      format("woff2");
}
@font-face {
  font-family: "Arvo-fallback";
  font-display: fallback;
  src: local("Arvo"),
    url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2)
      format("woff2");
}

.auto {
  font-family: Arvo-auto;
}

.block {
  font-family: Arvo-block;
}

.swap {
  font-family: Arvo-swap;
}

.optional {
  font-family: Arvo-optional;
}

.fallback {
  font-family: Arvo-fallback;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.