Link to home
Start Free TrialLog in
Avatar of Larry Vollmer
Larry Vollmer

asked on

CSS problem

I have this very simple site:

http://tinyurl.com/797vsae

The H1 and P text is supposed to use a font called museo slab but the font is not rendering. Can't figure out why. Any idea?

h1 {
      font:500 40px "museo-slab-1", "museo-slab-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
      color:#49413c;
      margin-bottom:20px
      }
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

@font-face {  
  font-family: yourFontName ;  
  src: url( /location/of/font/FontFileName.ttf ) format("truetype");  
}  
 
/* Then use it like you would any other font */  
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;  
}  

From here: http://randsco.com/index.php/2009/07/04/p680
Avatar of Larry Vollmer
Larry Vollmer

ASKER

that doesn't seem to be working, here is the amended CSS:

/* CSS Document */
@font-face {
	font-family: Museo500;
	src: url(http://s130859622.onlinehome.us/hp/sitedown/MuseoSans-500.otf) format("opentype");  
}
@font-face {
	font-family: Museo700;
	src: url(http://s130859622.onlinehome.us/hp/sitedown/MuseoSans-700.otf) format("opentype");  
}
body {
	background:#f1f1e7 !important;;
}
#wrapper {
	width: 940px;
	padding-top: 0pt;
	padding-right: 10px;
	padding-bottom: 0pt;
	padding-left: 10px;
	margin-top: 0pt;
	margin-right: auto;
	margin-bottom: 0pt;
	margin-left: auto;
	box-shadow: 0pt 0pt 20px rgba(0, 0, 0, 0.05); 
}

h1 {
	font-family: Museo500, sans-serif; 
	font-size:40px;
	font-weight:500;
	color:#49413c;
	margin-bottom:20px
	}
	
.body {
	width:570px;
	margin:auto;
}
.body p {
	font-family: Museo300, sans-serif; 
	font-size:24px;
	font-weight:300;
	color:#49413c;
	margin-bottom:20px
	}
#tabs ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	} 

.social {
	margin:0 auto;
	padding-top:20px;
	padding-bottom:100px;
}

#wrapper ul li {
	padding: 2px 15px 5px;
	list-style-type: none;
	display: inline;
	}
	
.footer {
	clear: both;
	color: #f1f1e7;
	background-color: #524c39;
	height:100%;
}

Open in new window

In my test with the Museo500 font, the downloaded font renders correctly in Chrome and IE. Do I need to check a specific browser or version?
User generated image
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
yes - I usd the wrong museo font, it is supposed to be museoSLAB not museosans, I am changing it now and will report back
Thanks - I got it working on another server.