Arial Narrow and Arial Black...

User 1871531 Photo


Registered User
49 posts

I realize this is not an issue with VSD specifically, but can someone comment on a possible work-around to this issue?

It's pretty well known that Firefox updated/upgraded their font rendering engine a while ago. Unfortunately, the new engine does not handle Arial Narrow or Arial Black properly. It substitutes a different font. It looks like Georgia Bold in my case.

According to this article: http://www.courage.co.nz/articles/why-d … n-firefox/ you can insert html code to resolve this problem. Currently, VSD inserts the following type style code automatically:

<style type="text/css">

/* TEXT STYLES */

.textstyle0 {font-family:Arial Black;font-weight:bold;font-style:normal;font-size:18px;text-decoration:none;color:#204040;}
.textstyle1 {font-family:Georgia;font-weight:normal;font-style:italic;font-size:10px;text-decoration:none;color:#204040;}
.textstyle2 {font-family:Arial;font-weight:bold;font-style:italic;font-size:10px;text-decoration:none;color:#5a002d;}
.textstyle3 {font-family:Arial;font-weight:normal;font-style:italic;font-size:10px;text-decoration:none;color:#5a002d;}
.textstyle4 {font-family:Arial Black;font-weight:normal;font-style:normal;font-size:13px;text-decoration:none;color:#000000;}
.textstyle5 {font-family:Georgia;font-weight:normal;font-style:normal;font-size:13px;text-decoration:none;color:#000000;}
.textstyle6 {font-family:Georgia;font-weight:normal;font-style:italic;font-size:13px;text-decoration:none;color:#000000;}
.textstyle7 {font-family:Arial Black;font-weight:normal;font-style:normal;font-size:15px;text-decoration:none;color:#326464;}
.textstyle8 {font-family:Georgia;font-weight:normal;font-style:italic;font-size:10px;text-decoration:none;color:#000000;}
.textstyle9 {font-family:Arial;font-weight:bold;font-style:normal;font-size:13px;text-decoration:none;color:#000000;}
.textstyle10 {font-family:Arial;font-weight:normal;font-style:normal;font-size:13px;text-decoration:none;color:#000000;}
.textstyle11 {font-family:Arial;font-weight:normal;font-style:normal;font-size:13px;text-decoration:none;color:#ff0000;}

My question is how to insert "corrected code" according to the article into VSD so my Arial Black renders properly in Firefox? Is this even possible?
User 2088758 Photo


Senior Advisor
3,086 posts

Yes you can fix this by replacing the vsd text area with an html box and put this in it:

<p style="font-family: 'Arial Narrow', Arial, sans-serif;font-size: 14px;font-style: normal;font-variant: normal;font-weight: 400;line-height: 20px;">Put your text here</p>


You may want to tweak the other styles to match your website.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 1871531 Photo


Registered User
49 posts

That code does work to force the Arial Black font. "The problem" is that I have 20+ pages of text using Arial Black interspersed with other text. Ideally, the code could be applied and work globally across my website. Here's one of my pages that illustrate how the Arial Black is "sprinkled" in numerous areas as headers.

http://www.chisagocountyhistory.org/09- … ember.html

I don't know enough about html coding to know whether "correction code" can be applied globally in VSD and if so, how to implement it.

Is there code I could insert into the /*TEXT STYLES*/ definitions? That would allow me to make one edit on each webpage prior to posting the updated site. I could live with that until I move to a responsive design platform.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.