I'm working with some really great designers. In translating their design, they are asking me why sometimes we don't render non-system fonts exactly as depicted in their designs. A very recent example can be shown in the image attached to this question (ignore red annotations):

![enter image description here](https://i.stack.imgur.com/7f5xP.jpg)

I'm using fonts from fonts.com via a javascript include, which allows me to utilize new font-family in my css. I want to draw your attention to two things:

a) On the left, notice the description text "In an effort to ..." is much bolder than "Lorem ipsum ...". Font is "Droid Serif W01 Italic".

b) On the right, notice "MEET ONE" is much bolder than "COMMERZBANK". The font family is "UniversLTW01-57Condense 723821".

I made sure font-weight:normal. And yet, things still look bold on some computers...and it seems to vary depending on which OS and browser you are on. It seems like the only way I can modify the weight of these fonts in an aesthetically pleasing way is by choosing another variation of the font family like the oblique or condensed version (if they exist). But often times, I still can't get the weight to render properly on all the different OS and browser combinations.

How do you guys address these issues? Are there techniques I can use to make the fonts render exactly as depicted in designs regardless of the viewers operating system and browser?