Is is possible to target HTML (text) With CSS? – It appears as (text) as the ID

6 Views

I’m having an issue with embedding twitter onto a wordpress run site that I’m converting from HTML 5.

The problem I’m having is that the tweets are not in my custom font…

Read More

enter image description here

This is the HTML code that I can’t target with any css, i’m using a custom font imported with css for all the text on the site. 

<article id="twitter">
    <h3>Twitter:</h3>
        Test tweet to get embedded code. 
            <a href="http://twitter.com/Max__Chandler/statuses/202020801917095939" class="aktt_tweet_time">28 mins ago
    </a>
</article>

PHP Code taken from Index.php 

<article id="twitter">
    <h3>Twitter:</h3><?php aktt_latest_tweet(); ?>
</article>

The css ID as shown in chrome is 

article#twitter (text)

I’ve tried targeting: #twitter, html, body, text, (text), “”.

Someone enligten me as to how I can get this peice of text to be displayed in the font that I’ve chosen – I’d like to just use CSS is possable to keep things simple!

URL:

http://www.msc-media.co.uk

This is how the font is imported using CSS 

    @font-face {
        font-family: 'JosefinSansStdLight';
        src: url('/wp-content/themes/1/JosefinSansStd-Light-webfont.eot');
        src: url('/wp-content/themes/1/JosefinSansStd-Light-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/1/JosefinSansStd-Light-webfont.woff') format('woff'),
             url('/wp-content/themes/1/JosefinSansStd-Light-webfont.ttf') format('truetype'),
             url('/wp-content/themes/1/JosefinSansStd-Light-webfont.svg#JosefinSansStdLight') format('svg');
        font-weight: normal;
        font-style: normal;

    }


    p, a, h1, h2, h3, h4, h5, h6{
        font:'JosefinSansStdLight';
        letter-spacing: 0.1em;
    }
    a{font:1.25em 'JosefinSansStdLight';}
    p{font:1.2em 'JosefinSansStdLight';}
    h1{font:3em 'JosefinSansStdLight';}
    h2{font:2em 'JosefinSansStdLight';}
    h3{font:1.25em 'JosefinSansStdLight';}
    h4{font:18px/27px 'JosefinSansStdLight';}
    h5{font:18px/27px 'JosefinSansStdLight';}
    h6{font:18px/27px 'JosefinSansStdLight';}
Post Views: 6

Related posts

Leave a Reply

5 comments

  1. The CSS “font” property requires both the “font-size” and “font-family” values to be vaild. Several places in your CSS file, you have the following:

    font:'JosefinSansStdLight';

    This is not valid CSS because it does not include the “font-size” value. You should either include the size like you did for the a, p, h1, h2, h3, etc.:

    a{font:1.25em 'JosefinSansStdLight';}
p{font:1.2em 'JosefinSansStdLight';}
h1{font:3em 'JosefinSansStdLight';}
h2{font:2em 'JosefinSansStdLight';}
h3{font:1.25em 'JosefinSansStdLight';}
h4{font:18px/27px 'JosefinSansStdLight';}
h5{font:18px/27px 'JosefinSansStdLight';}
h6{font:18px/27px 'JosefinSansStdLight';}

    Or, you can change the “font” declarations to “font-family” declarations:

    font-family:'JosefinSansStdLight';

  2. try #twitter {font-family: your fonts} if it doesn’t work then there is something wrong with your font or the way you embed/register it.
    To test that try changing the background-color if that works the font is your problem.

  3. I think the best bet to get this to work across all browsers is going to be enclosing the twitter content inside another html element – a div or a span. To do that, you want to make your php code look like this:

    <article id="twitter">
    <h3>Twitter:</h3>
    <div class="twitter_content">
      <?php aktt_latest_tweet(); ?>
    </div>
</article>

    Then you will set css attributes on the .twitter_content class.

    If you go with a div (as I did here), you probably want one of those css attributes to be display:inline-block;

  4. It looks like the body of the tweat is not wrapped in any paragraph tags, and the css shown does not include any directions for text outside a paragraph or header.

    You could try either specify the font and formatting in css for the “body” element, or wrapping the content of the tweat in some

    tags.

    When you mention a problem with targeting, it may be worth noting that is an HTML5 element, and support for recognising and targetting css using this element may vary from browser to browser at the moment.

    You may be able to use html5shiv or modernisr javascript workarounds to support changing this into a div in unsupported browsers.

    http://code.google.com/p/html5shiv/

    http://modernizr.com/

  5. @janw and @digitalsean are right on. Use font-family: 'JosefinSansStdLight' rather than just font: 'JosefinSansStdLight'. Depending on the browser you may also need to add a shiv.

    It sounds to be like you may be dealing with a CSS specificity issue. Something else in your CSS code has a higher specificity than the declarations you’re trying to apply. Try making your declaration something like this:

    body article#twitter {

    font-family:'JosefinSansStdLight' !important;
    letter-spacing: 0.1em;

}

body article#twitter h3 {

    font-family:'JosefinSansStdLight' !important;
    letter-spacing: 0.1em;

}

    Works for my using your basic structure in this example: http://jsfiddle.net/jstam/Z8Fh7/