Using subsetted fonts and font stacks is an efficient and terse way to enhance typography. No javascript or added markup.
Forked from Heydon's Pen ROCK & ROLL.
A Pen by Stefan Imhoff on CodePen.
<p>Simple subsetting and inheritance trick using Google Fonts. The key part is the <code>text=%26</code> parameter in the Lobster Two font <code>@import</code>. This makes Google send a font containing just the "&" character.</p> | |
<!-- Look, Mum, no <span>s! --> | |
<h1>ROCK & ROLL</h1> |
Using subsetted fonts and font stacks is an efficient and terse way to enhance typography. No javascript or added markup.
Forked from Heydon's Pen ROCK & ROLL.
A Pen by Stefan Imhoff on CodePen.
@import url(http://fonts.googleapis.com/css?family=Bevan); | |
@import url(http://fonts.googleapis.com/css?family=Lobster+Two&text=%26); | |
h1 { | |
font-family: Lobster Two, Bevan; | |
text-ALIGN: center; | |
font-size: 9vw; | |
margin-top: 0; | |
} | |
/* Just for the explanation */ | |
p { | |
width: 70vw; | |
margin: 1em auto 0; | |
font-size: 20px; | |
font-family: sans-serif; | |
} | |
code { | |
background: #ccc; | |
padding: 0 0.5em; | |
} |