Forums

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
    Posts
  • #29458
    Jerm993
    Member

    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

    #78585
    Capt Otis
    Member

    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

    #78597
    Jerm993
    Member

    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.

    #78599
    Jerm993
    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.

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