Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1027
  • Last Modified:

Font not rendering correctly in some browsers

Take a look at a page I did please - www.mdbimmedia.com - I'm seeing on some people's browsers that the 'Stencil' style of type is not rendering at all, and it is defaulting to sans-serif, which isn't bad, but...

Can you give me a specific fix on this, or does everything look okay?

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>The Michael Des Barres Band - Carnaby Street</title>
<script src="/pickle/pickle.js" language="javascript"></script>
<link href="/pickle/skins/basic_audio_player/_stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-image: url(_images/mdbbackground_repeat.jpg);
	background-repeat: repeat-x;
	margin-top: 25px;
	background-color: #010010;
	text-align: left;
}
html, body {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	background-image: url(_images/mdbbackground.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 1200px;
	width: 1600px;
	position: relative;
}
#header {
	height: 205px;
	width: 1300px;
	background-image: url(_images/headerimage.jpg);
	background-repeat: no-repeat;
}

.twtr-widget {
      text-align: center;
   }
   .twtr-doc {
      text-align: left;
      margin: auto;
   }
.menuType {
	font-family: Stencil, "Verdana Bold", sans-serif;
	font-size: 17pt;
	color: #F3E7C4;
	line-height: 24px;
}
#mdbvideointro {
	height: 240px;
	width: 800px;
	background-image: url(_images/mdbvideointrobkgnd.jpg);
	background-repeat: no-repeat;
}

#main {
	height: 600px;
	width: 875px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 90px;
	float: left;
	background-image: url(_images/mainbkgnd.jpg);
	background-repeat: no-repeat;
}
#footer {
	height: 50px;
	width: 1210px;
	margin-left: 90px;
	margin-right: 90px;
	float: left;
	text-align: center;
}
.footerType {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
}
a:link {
	color: #F3E7C4;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #F3E7C4;
}
a:hover {
	text-decoration: underline;
	color: #36B5D8;
}
a:active {
	text-decoration: none;
	color: #F3E7C4;
}

#apDiv1 {
	position: absolute;
	width: 835px;
	height: 66px;
	z-index: 1;
	left: 453px;
	top: 108px;
}
#sidebar {
	position:absolute;
	width:311px;
	height:837px;
	z-index:2;
	left: 988px;
	top: 207px;
	background-image: url(_images/sidebarbkgnd.jpg);
	background-repeat: no-repeat;
	font-family: Stencil, "Verdana Bold", sans-serif;
	font-size: 1em;
	text-align: center;
	color: #a50002;
}
.form {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	font-weight: bold;
}
#apDiv2 {
	position:absolute;
	width:315px;
	height:108px;
	z-index:1;
	left: -16px;
	top: -192px;
}
#apDiv3 {
	position:absolute;
	width:483px;
	height:230px;
	z-index:3;
	left: 480px;
	top: 205px;
	text-align: center;
}
#apDiv4 {
	position:absolute;
	width:295px;
	height:81px;
	z-index:3;
	left: 991px;
	top: 9px;
}
#apDiv5 {
	position:absolute;
	width:403px;
	height:109px;
	z-index:3;
	left: 896px;
	top: 11px;
}
</style>
</head>

<body>

<div class="menuType" id="apDiv1">
    <p class="menuType">
    <a id="home_link" href="home.html" target="mainsource">HOME</a> | 
    <a id="album_link" href="album.html" target="mainsource">ALBUM</a> | 
    <a id="incarnations_link" href="incarnations.html" target="mainsource">INCARNATIONS</a> | 
    <a id="band_link" href="band.html" target="mainsource">BAND</a> | 
    <a id="video_link" href="video.html" target="mainsource">VIDEO</a> | 
    <a id="news_link" href="news.html" target="mainsource">NEWS</a> | 
    <a id="gigs_link" href="gigs.html" target="mainsource">GIGS</a> <br>
    <a id="gallery_link" href="gallery.html" target="mainsource">GALLERY</a> |
    <a id="media_link" href="press.html" target="mainsource">MEDIA/PROPAGANDA</a> | 
    <a id="shop_link" href="shoppes.html" target="mainsource">CARNABY STREET SHOPPES</a></p>
</div>
<div id="sidebar">
    <h1>LET'S GET CONNECTED
      <br>
    <img src="_images/socialmedia.png" alt="Social Media Icons" width="252" height="40" border="0" usemap="#Map2">
    <map name="Map2" id="Map2">
      <area shape="rect" coords="87,4,119,35" href="http://www.youtube.com/user/MDesBarres/videos" alt="You Tube" />
      <area shape="rect" coords="7,7,37,33" href="https://www.facebook.com/MichaelDesBarres.OfficialPage" />
      <area shape="rect" coords="50,5,75,33" href="https://twitter.com/#!/MDesbarres" alt="Twitter" />
      <area shape="rect" coords="129,3,158,34" href="http://www.imdb.com/name/nm0220735/" />
      <area shape="rect" coords="172,4,201,35" href="https://www.facebook.com/pages/Michael-Des-Barres/213836765378516" alt="Facebook Like" />
      <area shape="rect" coords="215,6,240,31" href="feed://www.desbarres.com/feed/" alt="RSS Feed" />
    </map>
    </h1>
	<form method="post" action="formmail.php">
	      <p class="form">Keep in touch! Send your e-mail to<br>
        The Michael Des Barres Band!<br>
				<label for="Email">Email:</label>
				<input type="text" name="Email" id="Email" />
				<input type="submit" name="submit" value="Submit" class="submit-button" />
				</p>
	</form>  
    <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 30000,
  width: 250,
  height: 300,

  theme: {
    shell: {
      background: '#a60306',
      color: '#ffffff'
    },
    tweets: {
      background: '#f0ebda',
      color: '#59451d',
      links: '#1d7899'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('MDesbarres').start();
</script></div>
<div id="wrapper">
  <div id="header">
    <div id="apDiv3"><img src="_images/ordernow.png" alt="Order Now!" width="483" height="230" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="335,162,431,188" href="http://itunes.apple.com/us/album/carnaby-st/id543864627" />
        <area shape="rect" coords="19,189,124,212" href="http://www.amazon.com/gp/product/B007VMSFF2/ref=as_li_tf_tl?ie=UTF8&amp;tag=desbarrescom-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B007VMSFF2" />
        <area shape="rect" coords="129,188,250,215" href="http://www.amazon.co.uk/gp/product/B007VMSFF2/ref=as_li_tf_tl?ie=UTF8&amp;tag=desbarrescom-21&amp;linkCode=as2&amp;camp=1634&amp;creative=6738&amp;creativeASIN=B007VMSFF2" />
        <area shape="rect" coords="364,191,435,216" href="http://www.gonzomultimedia.com/product_details/15483/Michael_Des_Barres-Carnaby_Street.html" />
      </map>
    </div>
    <div id="apDiv5"><span class="menuType">The Michael Des Barres Band plays the infamous Viper room on Sunset Blvd. in Hollywood - Friday Night, Sept. 21!</span></div>
  </div>
  <div id="mdbvideointro"></div>
  
  <div id="main">
  
  <!-- begin main content iframe -->
  <iframe name="mainsource" id="mainsource" width="875" height="600" frameborder="0" scrolling="yes" src="home.html"></iframe>
  
  </div>

  <div id="footer">
    <p><br>
      <span class="footerType">©2012 MDBimmedia  •  Website Design by Richard Stellar / Interstellar9 </span></p>
    <p><img src="_images/carnabystreetcover.jpg" width="72" height="72" alt="Carnaby Street" /></p>
  </div>
</div>
</body>
</html>

Open in new window

0
Revolution9
Asked:
Revolution9
  • 3
  • 3
1 Solution
 
GaryCommented:
Which browser? Looks fine to me IE9, FF and Chrome
0
 
Sam66Commented:
Hi,

Might it be the system rather than the browser? It'll only render as that where the computer has the stencil font installed. Google web fonts is quite a nice way to avoid this problem though, Have a look at : http://www.google.com/webfonts/ .

Here's an example using a smiler font :

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Allerta+Stencil' rel='stylesheet' type='text/css'>
<style>
h1, h2, h3, h4, h5, h6 {
		color: #474747;
		font-family: 'Allerta Stencil', "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
		font-weight: bold; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 17px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 21px; }
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>

Open in new window


That will render the same on most machines!

Sam
0
 
Revolution9Author Commented:
Sam, thanks so much.  I must have done something wrong.  The Google 'stencil' font is not appearing on this page where I made your changes:

www.mdbimmedia.com/indexfont.html

Here is the revised code.  Please let me know where I screwed up:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>The Michael Des Barres Band - Carnaby Street</title>
<link href='http://fonts.googleapis.com/css?family=Allerta+Stencil' rel='stylesheet' type='text/css' />
<script src="/pickle/pickle.js" language="javascript"></script>
<link href="/pickle/skins/basic_audio_player/_stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-image: url(_images/mdbbackground_repeat.jpg);
	background-repeat: repeat-x;
	margin-top: 25px;
	background-color: #010010;
	text-align: left;
}
html, body {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	background-image: url(_images/mdbbackground.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 1200px;
	width: 1600px;
	position: relative;
}
#header {
	height: 205px;
	width: 1300px;
	background-image: url(_images/headerimage.jpg);
	background-repeat: no-repeat;
}

.twtr-widget {
      text-align: center;
   }
   .twtr-doc {
      text-align: left;
      margin: auto;
   }
.menuType {
	font-family: font-family: 'Allerta Stencil', "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
		font-weight: bold;
	font-size: 17pt;
	color: #F3E7C4;
	line-height: 24px;
}
#mdbvideointro {
	height: 240px;
	width: 800px;
	background-image: url(_images/mdbvideointrobkgnd.jpg);
	background-repeat: no-repeat;
}

#main {
	height: 600px;
	width: 875px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 90px;
	float: left;
	background-image: url(_images/mainbkgnd.jpg);
	background-repeat: no-repeat;
}
#footer {
	height: 50px;
	width: 1210px;
	margin-left: 90px;
	margin-right: 90px;
	float: left;
	text-align: center;
}
.footerType {
	font-family: font-family: 'Allerta Stencil', "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
		font-weight: bold;
	font-size: 12px;
	color: #FFF;
}
a:link {
	color: #F3E7C4;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #F3E7C4;
}
a:hover {
	text-decoration: underline;
	color: #36B5D8;
}
a:active {
	text-decoration: none;
	color: #F3E7C4;
}

#apDiv1 {
	position: absolute;
	width: 835px;
	height: 66px;
	z-index: 1;
	left: 453px;
	top: 108px;
}
#sidebar {
	position:absolute;
	width:311px;
	height:837px;
	z-index:2;
	left: 988px;
	top: 207px;
	background-image: url(_images/sidebarbkgnd.jpg);
	background-repeat: no-repeat;
	font-family: font-family: 'Allerta Stencil', "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
		font-weight: bold;
	font-size: 1em;
	text-align: center;
	color: #a50002;
}
.form {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	font-weight: bold;
}
#apDiv2 {
	position:absolute;
	width:315px;
	height:108px;
	z-index:1;
	left: -16px;
	top: -192px;
}
#apDiv3 {
	position:absolute;
	width:483px;
	height:230px;
	z-index:3;
	left: 480px;
	top: 205px;
	text-align: center;
}
#apDiv4 {
	position:absolute;
	width:295px;
	height:81px;
	z-index:3;
	left: 991px;
	top: 9px;
}
#apDiv5 {
	position:absolute;
	width:403px;
	height:109px;
	z-index:3;
	left: 896px;
	top: 11px;
}
</style>
</head>

<body>

<div class="menuType" id="apDiv1">
    <p class="menuType">
    <a id="home_link" href="home.html" target="mainsource">HOME</a> | 
    <a id="album_link" href="album.html" target="mainsource">ALBUM</a> | 
    <a id="incarnations_link" href="incarnations.html" target="mainsource">INCARNATIONS</a> | 
    <a id="band_link" href="band.html" target="mainsource">BAND</a> | 
    <a id="video_link" href="video.html" target="mainsource">VIDEO</a> | 
    <a id="news_link" href="news.html" target="mainsource">NEWS</a> | 
    <a id="gigs_link" href="gigs.html" target="mainsource">GIGS</a> <br>
    <a id="gallery_link" href="gallery.html" target="mainsource">GALLERY</a> |
    <a id="media_link" href="press.html" target="mainsource">MEDIA/PROPAGANDA</a> | 
    <a id="shop_link" href="shoppes.html" target="mainsource">CARNABY STREET SHOPPES</a></p>
</div>
<div id="sidebar">
    <h1>LET'S GET CONNECTED
      <br>
    <img src="_images/socialmedia.png" alt="Social Media Icons" width="252" height="40" border="0" usemap="#Map2">
    <map name="Map2" id="Map2">
      <area shape="rect" coords="87,4,119,35" href="http://www.youtube.com/user/MDesBarres/videos" alt="You Tube" />
      <area shape="rect" coords="7,7,37,33" href="https://www.facebook.com/MichaelDesBarres.OfficialPage" />
      <area shape="rect" coords="50,5,75,33" href="https://twitter.com/#!/MDesbarres" alt="Twitter" />
      <area shape="rect" coords="129,3,158,34" href="http://www.imdb.com/name/nm0220735/" />
      <area shape="rect" coords="172,4,201,35" href="https://www.facebook.com/pages/Michael-Des-Barres/213836765378516" alt="Facebook Like" />
      <area shape="rect" coords="215,6,240,31" href="feed://www.desbarres.com/feed/" alt="RSS Feed" />
    </map>
    </h1>
	<form method="post" action="formmail.php">
	      <p class="form">Keep in touch! Send your e-mail to<br>
        The Michael Des Barres Band!<br>
				<label for="Email">Email:</label>
				<input type="text" name="Email" id="Email" />
				<input type="submit" name="submit" value="Submit" class="submit-button" />
				</p>
	</form>  
    <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 30000,
  width: 250,
  height: 300,

  theme: {
    shell: {
      background: '#a60306',
      color: '#ffffff'
    },
    tweets: {
      background: '#f0ebda',
      color: '#59451d',
      links: '#1d7899'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('MDesbarres').start();
</script></div>
<div id="wrapper">
  <div id="header">
    <div id="apDiv3"><img src="_images/ordernow.png" alt="Order Now!" width="483" height="230" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="335,162,431,188" href="http://itunes.apple.com/us/album/carnaby-st/id543864627" />
        <area shape="rect" coords="19,189,124,212" href="http://www.amazon.com/gp/product/B007VMSFF2/ref=as_li_tf_tl?ie=UTF8&amp;tag=desbarrescom-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B007VMSFF2" />
        <area shape="rect" coords="129,188,250,215" href="http://www.amazon.co.uk/gp/product/B007VMSFF2/ref=as_li_tf_tl?ie=UTF8&amp;tag=desbarrescom-21&amp;linkCode=as2&amp;camp=1634&amp;creative=6738&amp;creativeASIN=B007VMSFF2" />
        <area shape="rect" coords="364,191,435,216" href="http://www.gonzomultimedia.com/product_details/15483/Michael_Des_Barres-Carnaby_Street.html" />
      </map>
    </div>
    <div id="apDiv5"><span class="menuType">The Michael Des Barres Band plays the infamous Viper room on Sunset Blvd. in Hollywood - Friday Night, Sept. 21!</span></div>
  </div>
  <div id="mdbvideointro"></div>
  
  <div id="main">
  
  <!-- begin main content iframe -->
  <iframe name="mainsource" id="mainsource" width="875" height="600" frameborder="0" scrolling="yes" src="home.html"></iframe>
  
  </div>

  <div id="footer">
    <p><br>
      <span class="footerType">©2012 MDBimmedia  •  Website Design by Richard Stellar / Interstellar9 </span></p>
    <p><img src="_images/carnabystreetcover.jpg" width="72" height="72" alt="Carnaby Street" /></p>
  </div>
</div>
</body>
</html>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Sam66Commented:
Hi,

That's just where you've ended up with a duplication of "font-family:" in the first line of your style :

.menuType {
      font-family: font-family: 'Allerta Stencil', "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
            font-weight: bold;
      font-size: 17pt;
      color: #F3E7C4;
      line-height: 24px;
}


I tried that and noticed that the Allerta Stencil font didn't look as good as I thought it might - I had a little look through the catalogue and found another called "Plaster" that might be better. That changes the link at the top to  :

<link href='http://fonts.googleapis.com/css?family=Plaster' rel='stylesheet' type='text/css'>

and the style to  :

 .menuType {
     font-family: 'Plaster', cursive,'Allerta Stencil', "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
         
      font-size: 17pt;
      color: #F3E7C4;
      line-height: 24px;
}

if you want to give it a go!
0
 
Revolution9Author Commented:
That's horrible.  I reverted it back to Allerta Stencil, but it's defaulting to Times, i think.
0
 
Sam66Commented:
Eh, Well have a look and see if there's a goggle font that you like - Or accept the limitation that it wont look as you would like unless the font is installed on that particular computer. I'd suggest using stencil as the primary and google's Allerta as the fallback.

.menuType {
     font-family: Stencil, 'Allerta Stencil',"Verdana Bold", sans-serif;  
         
      font-size: 17pt;
      color: #F3E7C4;
      line-height: 24px;
}
0
 
Revolution9Author Commented:
Thanks Sam!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now