Solved

CSS problem

Posted on 2012-03-28
6
297 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html Table looping 4 25
Troubles viewing HTML in Outlook 2010 client 3 30
2 separate CSS animations 2 17
..ignore the Question 1 8
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

860 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