Jump to content

{ Working with @Font-Face }


brysonprice

Recommended Posts

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 : )

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...