blob: fe1ac19c6eee25b70ca4ac7dc6b776752ba0395c [file] [log] [blame]
<!DOCTYPE html>
| The @font-face rule provides a prioritized, comma-separated list
| of external references or locally-installed font face names. When
| a font is needed the user agent iterates over the set of references
| listed, using the first one it can successfully activate. Fonts
| containing invalid data or local font faces that are not found are
| ignored and the user agent loads the next font in the list. If no
| font in the src list is available, fallback to the next font in the
| font family list.
<meta charset="utf-8">
body {
margin: 0;
font-family: Roboto;
font-size: 30px;
font-weight: normal;
color: #fff;
.containing-block {
background-color: #03a9f4;
width: 700px;
.font-face-1-div {
font-family: font-face-1, sans-serif-smallcaps;
.font-face-2-div {
font-family: font-face-1, font-face-2, casual;
.font-face-3-div {
font-family: font-face-1, font-face-2, font-face-3;
.font-face-4-div {
font-family: font-face-1, font-face-2, font-face-3, font-face-4, serif;
@font-face {
font-family: font-face-1;
src: local(DancingScript); /* Lookup using font's postscript name. */
@font-face {
font-family: font-face-2;
src: local(invalid1),
local(Coming Soon); /* Lookup using font's full name. */
@font-face {
font-family: font-face-3;
src: local(invalid1),
@font-face {
font-family: font-face-4;
src: local(invalid1),
local(DancingScript), /* Lookup using font's postscript name. */
local(Coming Soon), /* Lookup using font's full name. */
<div class="containing-block">
<div class="font-face-1-div">The Hegemony Consul</div>
<div class="font-face-2-div">The Hegemony Consul</div>
<div class="font-face-3-div">The Hegemony Consul</div>
<div class="font-face-4-div">The Hegemony Consul</div>