blob: d50693a4081bca191308ec669e11ccb3ad9810b7 [file] [log] [blame]
<!DOCTYPE html>
| When the font family name within a font-face rule is the same as a
| font family available in a given user's environment, it effectively
| hides the underlying font.
<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;
.serif-div {
font-family: serif;
.sans-serif-div {
font-family: sans-serif;
.roboto-div {
font-family: Roboto;
.sans-serif-smallcaps-div {
font-family: sans-serif-smallcaps;
@font-face {
font-family: Roboto;
src: local(DancingScript); /* Try using a Postscript name of a typeface.
@font-face {
font-family: serif;
src: local(Coming Soon); /* Try using a Full Name of a typeface. */
<div class="containing-block">
<div class="serif-div">The Hegemony Consul</div>
<div class="sans-serif-div">The Hegemony Consul</div>
<div class="roboto-div">The Hegemony Consul</div>
<div class="sans-serif-smallcaps-div">The Hegemony Consul</div>