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

June 23, 2010 at 6:46 pm #78599

Member

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:

<html>

<head>

<link href=' http://fonts.googleapis.com/css?family=Yanone Kaffeesatz' rel='stylesheet' type='text/css'/>

<style>

body{ background: #000; color: #fff; }



#heading li{ display: inline; }

#headerf{

font: normal 24px/26px 'Yanone Kaffeesatz';

letter-spacing: .4px;

text-transform: uppercase;

}

#header{

font: normal 15px/26px 'Yanone Kaffeesatz';

text-transform: uppercase;

letter-spacing: 1.2px;

}



</style>

</head>

<body>

<ul id="heading">

<li id="headerf">j</li>

<li id="header">eremy</li>

<li id="headerf">c</li>

<li id="header">arlsten</li>

</ul>

</body>

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