The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Google Webfont no Small-Caps Re: [Solved] Google Webfont no Small-Caps


Ok so I figured out how to achieve a small caps effect without using an image, If you can improve upon this let me know how

Heres the code:

<link href=' Kaffeesatz' rel='stylesheet' type='text/css'/>
body{ background: #000; color: #fff; }

#heading li{ display: inline; }
font: normal 24px/26px 'Yanone Kaffeesatz';
letter-spacing: .4px;
text-transform: uppercase;
font: normal 15px/26px 'Yanone Kaffeesatz';
text-transform: uppercase;
letter-spacing: 1.2px;

<ul id="heading">
<li id="headerf">j</li>
<li id="header">eremy</li>
<li id="headerf">c</li>
<li id="header">arlsten</li>

Quite a bit of markup to achieve something like small-caps, but i feel good that I’ve found a work-a-round.