Grow your CSS skills. Land your dream job.

[Solved] Google Webfont no Small-Caps

  • # June 23, 2010 at 8:33 am

    Hey 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 Carlsten

    # June 23, 2010 at 1:34 pm

    Not sure if this helps

    http://www.fontsquirrel.com/fonts/Yanone-Kaffeesatz

    # June 23, 2010 at 2:25 pm

    Using 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 4:37 pm
    "Capt Otis" wrote:
    Using 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

    Don’t use this method if you want cross-browser compatibility

    # June 23, 2010 at 6:04 pm

    Thanks 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

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".