dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Google Webfont has no Small-Caps

  1. #1
    Join Date
    Oct 2009
    Posts
    15

    Google Webfont has no Small-Caps

    In a post on css-tricks, I recently posted about a problem i encountered with Google's web font directory not having a small-caps variant. So after some messing around i came up with a way to achieve that effect using and inline unordered list and some text sizing;
    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>
    The problem comes when trying to use this text dynamically, the words are split up in separate list elements, If I were to use this for say a header in Wordpress i wouldn't be able to use the admin panel to type in the site name as i could only place it in one element(As far as i know). My questions; first, Is there possibly a better way to achieve the effect? Second; If not, is there possibly some jquery or JavaScript, that could force the separate list elements to act as one?

    Thanks in advance,
    Jeremy Carlsten

  2. #2
    Join Date
    Jul 2010
    Posts
    4
    Why don't you just use {font-variant: small-caps;}?

  3. #3
    Join Date
    Oct 2013
    Posts
    976
    First of all you cannot reuse IDs like you are doing. That's the rules. If you need to apply a style to more than one element use class. With that out of the way, here's another idea:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
       <head>
       <meta charset="UTF-8">
       <title>Jerm993</title>
       <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet'>
          <style>
             body{ background: #000; color: #fff; }
             
             header {
    	    text-transform: uppercase;
                font: normal 15px/26px 'Yanone Kaffeesatz';
                letter-spacing: 1.2px;
    	    padding-top: 1em;
    	    padding-left: 2em;
    	 }
             .headerf{ 
                font: normal 24px/26px 'Yanone Kaffeesatz';
                letter-spacing: .4px;
             }
          </style>
       </head>
       <body>
             <header>
                <span class="headerf">j</span>eremy <span class="headerf">c</span>arlsten
             </header>   
       </body>
    </html>
    Adjust as necessary.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles