- This topic is empty.
-
AuthorPosts
-
June 23, 2010 at 8:33 am #29458
Jerm993
MemberHey everyone, I’m working on a project where i used the Google web font ‘Yanone Kaffeesatz’ on about all of my headers. In Photoshop i found that the font gave a really nice effect when using the variant Small-Caps. However, once I started to code i realized that Google doesn’t have a small-caps variant therefore the text changed to the default browser font. Can any of you think of a way to get that font in small caps, Short of using images for all of my headers?
Also note that i’ll be using WordPress so some of these would be dynamically changed, if ever.
Thanks in Advance,
Jeremy CarlstenJune 23, 2010 at 2:25 pm #78585Capt Otis
MemberUsing the font posted above me, you can incorporate it into css.
http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css
June 23, 2010 at 6:04 pm #78597Jerm993
MemberThanks guys ill check the links out and get back to you if it worked.
Update- Turns out that the Font doesn’t have a small-caps version, I was only able to achieve it because Photoshop will force any font to be small caps. So, Ill either need to use images, Or i Have an idea of a way to possibly achieve the effect in css with some extra work.
June 23, 2010 at 6:46 pm #78599Jerm993
MemberOk 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.