{ Working with @Font-Face }

brysonprice · February 24, 2011

I've been watching some tutorials on @Font-Face and I thought that I had the hang of it, but I guess not : /

I uploaded a font to FONT SQUIRREL'S @Font-Face generator (Link to FONT SQUIRREL'S @Font-Face generator). I was able to get this font to work in a project with nothing else in it, except the text I wanted. But when I tried to upload it to my BIOGRAPHY PAGE, the font didn't come out looking correct. Can someone please tell me what I'm doing wrong?

============================================================================================================================================

#1 Here is the browser screen shot and the code for the TEXT only project:

browser screen shot TEXT only project:

TEXT only screen shot

Code for TEXT only project:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

<style type="text/css">
		body{
		font-family: 'ChaletParisNineteenEightyRegu';
				}


</style>

<title>test font</title>
</head>

<body>
<div class="section">
				<div class="glyph_range">BRYSON PRICE ALWAYS HAD A PASSION FOR MUSIC</div>
			</div>
			<div class="section">
</body>
</html>

#2 Here is the browser screen shot and the code for the BIOGRAPHY PAGE in which I want to implement the font:

browser screen shot for BIOGRAPHY PAGE:

BIOGRAPHY PAGE screen shot

Code for BIOGRAPHY PAGE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Bryson Price Music</title>
<style type="text/css">


#wrapper {
text-align: left;
width: 960px;
position: relative;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
background-color: #FFF;
}
body {
background-repeat: repeat;
text-align: center;
margin: 0px;
padding: 0px;
}
.biobody {
background-color: #e9e6e6;
border: 3px solid #282828;
height: 400px;
width: 896px;
margin-right: 34px;
margin-left: 36px;
clip: rect(auto,34px,auto,36px);
}
.belowheader {
height: 122px;
width: 899px;
margin-left: 38px;
}
.header {
height: 170px;
background-color: #e9e6e6;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 3px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #282828;
border-right-color: #282828;
border-bottom-color: #282828;
border-left-color: #282828;
text-align: center;
}
</style>
</head>

<body>
<div class="header" id="header"><span class="Biography"><img src="../New Design/Sliced menu/Menu words/sky-logo-font---sliced-in-photoshop_03.png" alt="biography" width="530" height="106" vspace="50" /></span></div>


<div id="wrapper">
 <div class="Biography" id="biography"></div>


 <div class="fancy" id="fancy">
   <div class="belowheader" id="belowheader"><img src="../New Design/Sliced menu/biography/below-header_03.png" width="899" height="122" alt="belowheader" /></div>
 </div>
 <div class="biobody" id="biobody">
 <div class="section">
				<div class="glyph_range">BRYSON PRICE ALWAYS HAD A PASSION FOR MUSIC</div>
			</div>
			<div class="section">
   <p>Biography content here </p>
   <p> </p>
 </div>
</div>



</body>
</html>

Wickham · February 24, 2011

I've only had a quick look, but your Biography page hasn't got styles which have the @font-face styles for several formats and also the class to apply it. This is what I have for my font from Font Squirrel:-

@font-face {
font-family: 'MatchbookMatchbook';
src: url('Matchbook-webfont.eot');
src: local('☺'), 
url('Matchbook-webfont.woff') format('woff'), 
url('Matchbook-webfont.ttf') format('truetype'), 
url('Matchbook-webfont.svg#webfontilT7vtqy') format('svg');
font-weight: normal;
font-style: normal;
}

.matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; }

You need to do the same with your font and change the class to whatever matches the markup (Biography or fancy or glyph_range).

http://www.wickham43.net/css3.php#font-face

brysonprice · February 24, 2011

Wickham,

like this?

@font-face {
font-family: 'ChaletParisNineteenEightyRegu';
src: url ('font/chaparei-webfont.eot');
src: local ('☺'),
url('font/chaparei-webfont.woff') format('woff'),
url('font/chaparei-webfont.ttf') format('truetype'),
url('font/chaparei-webfont.svg#webfonttE0NzRSo') format('svg');										    font-weight: normal;
   font-style: normal;
}

And what do you mean by " change the class to whatever matches the markup " ?

thanks : )

Wickham · February 25, 2011

Follow the instructions here:-

http://www.miltonbayer.com/font-face/

I meant that where my styles say

.matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; }

you have to change .matchbook to .Biography or .fancy or .glyph_range to match the class names in the html markup.

brysonprice · February 25, 2011

Follow the instructions here:-

http://www.miltonbayer.com/font-face/

I meant that where my styles say
.matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; }
you have to change .matchbook to .Biography or .fancy or .glyph_range to match the class names in the html markup.

alright, thanks : )

I'll check it out

Sign In

{ Working with @Font-Face }

Recommended Posts

brysonprice

Wickham

brysonprice

Wickham

brysonprice

Join the conversation

Browse

Activity

Store

Support