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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #29458

    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

    Capt Otis

    Using the font posted above me, you can incorporate it into css.


    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.


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.