brysonprice Posted February 24, 2011 Report Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 24, 2011 Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
brysonprice Posted February 24, 2011 Author Report Share Posted 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 : ) Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 25, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
brysonprice Posted February 25, 2011 Author Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.