Solved

CSS problem

Posted on 2012-03-28
6
296 Views
Last Modified: 2012-03-28
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
      }
0
Comment
Question by:lvollmer
  • 3
  • 3
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37776892
@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
0
 

Author Comment

by:lvollmer
ID: 37777097
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

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37777201
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?
Museo500
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37777270
I now see that the Museo500 font looks quite different than my test when viewed on this site.

http://www.myfonts.com/fonts/exljbris/museo/500/
0
 

Author Comment

by:lvollmer
ID: 37777285
yes - I usd the wrong museo font, it is supposed to be museoSLAB not museosans, I am changing it now and will report back
0
 

Author Closing Comment

by:lvollmer
ID: 37777309
Thanks - I got it working on another server.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to dynamically set the form action using jQuery.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question