Quantcast
Viewing all articles
Browse latest Browse all 14182

How to use Rosewood Std and Rosewood Std Fill with CSS

Hello,

 

I'm trying to figure out how to get Rosewood and Rosewood Fill typeface to work correctly in a web page.

 

I'm a Typekit subscriber they didn't have any advice to give me other than to tweak it in CSS, so I did. But, I now notice that the Fill typeface doesn't fill Rosewood 100% as it should. i don't don't own Rosewood Fill so I can't play with it in Illustrator.

 

Below is a .PNG file showing what I have now along with the CSS. The HTML is simple, the text is in two <p>'s. You can see how Fill is a couple of pixels off. I've tried 'font-weight: bold;' and '700' to get the browser to beef up the font but it didn't work.

 

Image may be NSFW.
Clik here to view.
Rosewood-Test-2.PNG

 

para-top {

    position: relative;

    z-index: 2;

    top: 128px;

    left: 50px;

    font: 6rem/1 "rosewood-std",sans-serif;

    color: #000;

}

 

.para-bottom {

    position: relative;

    z-index: 1;

    bottom: 67px;

    left: 50px;

    font: 6rem/1 "rosewood-std-fill",sans-serif;

    font-weight: bold;

    color: red;

}

 

Thanks,

Eric Miner


Viewing all articles
Browse latest Browse all 14182

Trending Articles