Photoshop Question posted in
The official user guide can be found here.

Trying to use 'Tw Cen MT Condensed Extra Bold' font in CSS – Photoshop

In my website, I want my header to use the ‘Tw Cen MT Condensed Extra Bold’ font. However, I am only able to create a font using ‘Tw Cen MT Condensed’ even with adding the bold effect, it does not look the same. I created the banner in photoshop and now I want to replicate the text in CSS.

Below is the link to my current code on Fiddle. Below that is an example of the text I want to create via Photoshop.

Also, is there a way so that I can include the same pattern from my background onto the text?

If all else fails, I could just upload the text itself as an image onto the website, but I would only do that as a last resort.

Thanks.

Link to Fiddle

Banner I want to create
enter image description here

Tags:

2

Answers


  1. 0

    Your going to need to find a web font version of that font for the best results, you can google for it or if the license for the font allows you to create one you can do that.

    A good one is

    http://www.fontsquirrel.com/tools/webfont-generator

    And you’ll have to include those files alongside your html and css to load it, otherwise someone who doesn’t have the font won’t be able to see it and the system will default to a different font.

    Login or Signup to reply.
  2. 0

    Unfortunately, it won’t work because the font is “non-standard”–as has already been explained.

    To get the look you want, create the text banner you want in your image editor (Photoshop?) and save it as a “.png” image file, directing Photoshop to “keep transparency” (I’m using a different image editor, so the command wording will probably be different in Photoshop). To minimize file size, set the image frame bars as close to the font as you can (the more area a “.png” covers, the greater the file size–clear space included–and the size difference seems to increase exponentially [by square]).

    All you’ll have left to do is manipulate the position of the text banner in the div (float, padding, margin, etc.).

    I know this is isn’t the answer you want, but it works–and you don’t have to worry about contingency code for different browsers, script blockers, etc. (you still have to code for the few who still block images and for accessibility standards, but IMHO it’s more effective–and cleaner–than writing contingency code and having to allow for the variability between this font and the widest/narrowest contingency font in your designated family.

    At least one part of your page will render the same in just about every browser.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search