|
CSS - @font-face Renders Strange
Hey everyone, the development site I'm working on is here....
http://firstchoiceflooring.stealthwd.ca/ The font in the top navigation is Media Gothic.... well, it's SUPPOSED to be. It's rendering really strange. I'm using @font-face. My font looks fine in photo shop, but it doesn't render correctly in FF or website (no IE yet). My CSS is like this.... Code: @font-face {
font-family: mediaGothic;
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.eot" ); /* IE */
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.ttf" ) format("truetype"); /* non-IE */
}
Code: #topNavContainer p{
height:100%;
width:100%;
text-align:center;
font-family: mediaGothic;
}
Any help would be appreciated. This is my first time using @font-face Similar TutorialsHey everyone. I've been reading up on @font-face, and to me it seems like not many people are using this. Its more or less supported in all browsers (well, not ie 6) so was wondering if there is a reason no one is using this that I'm over looking? If not it seems awesome, and I think it will make the designers here giddy with joy. On my Local Server and Development these work perfect. Code:
/*#########Font-Face: Arial-########*/
@font-face {font-family: Arial Rounded MT Bold;src: url(/templates/shushme_deals/fonts/Arial Rounded MT Bold.eot);}
@font-face {font-family: "Arial Rounded MT Bold";src:local(Arial Rounded MT Bold), url(/templates/shushme_deals/fontsArial Rounded MT Bold.ttf) format("truetype");}
@font-face {font-family: Arial Rounded MT;src: url(/templates/shushme_deals/fonts/Arial Rounded MT.eot);}
@font-face {font-family: "Arial Rounded MT";src:local(Arial Rounded MT), url(/templates/shushme_deals/fonts/Arial Rounded MT.ttf) format("truetype");}
For some reason on live production site, it does not load the fonts at all. What I'm I missing here. I am trying to install some fonts onto my website. I am having a problem with @font-face. I have followed the proper steps as told to me by multiple sites and I place the font I want to install into my website in the main directory and type up the code but it still doesn't work. Code:
@font-face{
font-family:'LithosPro-Regular';
src: url('LithosPro-Regular.otf') format('opentype');
}
h2 {
color:#30F;
font-family:'LithosPro-Regular', georgia, serif;
}
Is there something else I need to add or do? I appreciate any help as I've been stuck on this for days! When I embed a font using @font-face it does not seem to be anti-aliased. If I use Cufon YUI (Javascript) to embed the same font then it looks much smoother (images attached). Is it not possible to have smooth fonts using @font-face? Maybe it depends on the font? But then why does the JS version look so much smoother? EDIT If I just use the font normally it still looks bad, so I guess the Cufon conversion process somehow improves the font, which is displayed using HTML5 and Canvas. Hi guys, I have a stylesheet with the following styles pointing to font files in the same directory and then a h3 that should be using this font. I can't for the life of me get it working though, any idea why this could be? Code:
@font-face {
font-family: "Chunkfive";
src: url("Chunkfive-webfont.eot");
src: local("?"),
url("Chunkfive-webfont.woff") format("woff"), url("Chunkfive.otf") format("opentype"),
url("Chunkfive-webfont.svg#filename") format("svg");
}
h1, h2, h3, h4, h5, h6 {
font-family: "Chunkfive", Verdana,
sans-serif;
color: #4088B8;
clear: both;
}
h3 {
display:block;
/*position:absolute;
right:-5px; top:15px;*/
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
text-shadow: rgba(136, 164, 174, 0.496094) 3px 5px 3px; font-family: "Chunkfive", Verdana, sans-serif;
margin-top: -10px;
}
<h3>Websites / Examples</h3>
ANy help would be greatly appreciated Thanks GP Has anyone else dealt with a problem with using custom fonts w/ @font-face and Ipads? I have a site http://osake.garychus.com and throughout the site the font Lato is messed up, but on all other platforms it looks great. Hi everyone. Here is the url http://v3p2.stealthwd.ca/ its the dev version of my companies soon-to-be-new website. The font-face code is... Code: @font-face {
font-family: 'SlingLight';
src: url('/fonts/sling/slinglight-webfont.eot');
src: url('/fonts/sling/slinglight-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sling/slinglight-webfont.woff') format('woff'),
url('/fonts/sling/slinglight-webfont.ttf') format('truetype'),
url('/fonts/sling/slinglight-webfont.svg#SlingLight') format('svg');
font-weight: normal;
font-style: normal;
}
Any idea why its timing out? Thanks Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks I had a similar problem earlier this week and it turned out to be solved by changing the encoding of my php files to ASCII instead of the default UTF-8 set by MS Expression Web. The problem I have now is that one of my pages looks wrong in IE7. The same page looks fine in IE8, FireFox 3, Chrome, Opera, and Safari. This is what it looks like in IE7: This is what it looks like in IE8 and all the other browsers mentioned above: The page can be seen he http://dev.asbco.com/products/commercialindustrial/ Any help is greatly appreciated! Thanks! Am I missing some syntax here? In IE this image won't show up, in Firefox no problem. <img src="http://us.f2.yahoofs.com/users/41732981z94cf47c3/c124/__tn_/1186.jpg?ph.UM1BByCkprWYq"></a> web site herehere : small logo tag on upper right sidebar. . . I'm a newbie so be gentle. . . Thanks!! has anyone every had css render different on diffrent hosts? I have a small website which i tested on firefox 1.6 and IE6 locally. When i upload it, some things change, my nav <li>'s become narrower and images dont fit on 1 line anymore? any ideas what can cause such behaviour? Hello, I am trying to use the hr tag to create a visual division between news stories on this web page http://www.heshimakenya.org/newsmedia.html When I view this page in Firefox on a Mac, the story headlines are immediately under the hr line. I want to add some bottom padding to this line so there is some white space between the line and the headlines. I have used the hr tag in other sites and have never had this rendering issue before so I'm really stuck. For example, the site below uses the hr tag but when viewed in Firefox on a Mac, the lines render fine. http://oharenoise.org/ I've been working on a css zen garden and I've only got one more roadblock untill it is complete... The site works perfectly in IE 6 but all the other browsers don't like it so much. I suspect the problem lies in the positioning of the preamble and the supporting text, but I've tried nearly everything...I can make the site work in other browsers but then resizing the text causes the page to break. Plz help me make the site look and behave the way it does in IE accross all browsers. Here is the page- http://phobos.ramapo.edu/~chdonnel/zenie/ here is the css- http://phobos.ramapo.edu/~chdonnel/zenie/sample.css also the site closely follows the layout methods of this page http://csszengarden.com/?cssfile=/179/179.css&page=1 Thanks, Chris Has anyone seen hidden inputs being rendered as periods or dots under FF? I am using FF 3.5.4. Is this normal? Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-language" content="en">
<title>Funny Dots</title>
<style type="text/css">
input
{
border:1px solid blue;
display:inline-block;
}
</style>
</head>
<body>
<form action="index.php" method="post" name="mainForm">
<input type="hidden" name="aaa" value="5" />
<input type="hidden" name="bbb" value="" />
<input type="hidden" name="ccc" value="" />
</form>
</body>
</html>
I am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome. IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off. Any ideas how to fix this issue? Thanks! [EDIT] I meant Safari and Chrome not Safari and FireFox 3. Hey, for a while I've been developing a site, just to improve my skills in php etc. I always tested it in IE7/IE8 and Mozilla 3, I knew other browsers wouldn't render it great, but I also need things to look okay with Chrome. This is how my site SHOULD look: This is how it looks in chrome: My site URL is http://www.pokerbrothers.net The HTML for the entire page: The parts that effect the 2 bars that are broken in chrome are highlighted Code: <!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="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="poker,brothers,free,fast,simple,texas,holdem,guest" />
<meta name="robots" content="follow,index" />
<title>Home :: PokerBrothers.net</title>
<link href="http://www.static.pokerbrothers.net/css/include?load=15&x=182&y=631" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Globs
var session_id = "pjpennan89o2m1dn6kjh4n48d7";
var session_userid = 0;
var session_username = "Guest_";
var session_location = "http://www.pokerbrothers.net/";
var session_location_encoded = "http%3A%2F%2Fwww.pokerbrothers.net%2F";
var session_location_last = "";
function pageOnLoad () {
setTimeout("pbhttp_Session_Exit(true, '15')", 900000);
}
</script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/class.js" defer="defer"></script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/global.js" defer="defer"></script>
</head>
<body onload="pageOnLoad();">
<div id="container" align="center">
<div class="bar_container">
<ul id="bar_header">
<li id="bar_header_left"></li>
<li id="bar_header_title"><a href="http://www.pokerbrothers.net/"></a></li>
<li id="bar_header_fill"></li>
<li id="bar_header_howtoplay"><div/><a href="http://www.faq.pokerbrothers.net/play/how"></a></li>
<li id="bar_header_signup"><div/><a href="http://www.signup.pokerbrothers.net/"></a></li>
<li id="bar_header_play"><div/><a href="http://www.play.pokerbrothers.net/"></a></li>
</ul>
</div>
<div class="bar_container">
<div id="bar_navigation">
<div id="bav_navigation_top">
<div id="bar_navigation_top_left"></div>
<div id="bar_navigation_top_fill">
<div id="bar_navigation_top_fill_loginarea">
<form id="navlogin" name="navlogin" action="http://www.login.pokerbrothers.net/login" method="post" onsubmit="return pbhttp_nav_login_check()">
<div id="bar_navigation_top_fill_loginarea_usernamearea">
<input type="text" id="navlogin_username" name="navlogin_username" maxlength="30" value="Username" onfocus="nav_login_form_onclick('user');" onblur="nav_login_form_exit('user')" />
</div>
<div id="bar_navigation_top_fill_loginarea_passwordarea">
<input type="text" id="navlogin_password" name="navlogin_password" maxlength="30" value="Password" onfocus="nav_login_form_onclick('pass');" />
</div>
<div id="bar_navigation_top_fill_loginarea_submitarea">
<input type="submit" id="navlogin_submit" name="navlogin_submit" value="" />
</div>
</form>
</div>
<div id="bar_navigation_top_left_text">
Welcome to PokerBrothers. Please login or <a href="http://www.signup.pokerbrothers.net/">Sign up</a>
</div>
</div>
<div id="bar_navigation_top_right"></div>
</div>
<div id="bar_navigation_bottom">
<div id="bar_navigation_bottom_left"></div>
<div id="bar_navigation_bottom_fill">
</div>
<div id="bar_navigation_bottom_right"></div>
</div>
</div>
</div>
<div class="bar_container">
<table id="bar_body" cellpadding="0" cellspacing="0" border="0">
<tr id="bar_body_top">
<td id="bar_body_box1_top_left"></td>
<td id="bar_body_box1_top_fill" align="center"><div id="bar_body_box1_top_text"></div></td>
<td id="bar_body_merge_top"></td>
<td id="bar_body_box2_top_fill" align="center"><div id="bar_body_box2_top_text"></div></td>
<td id="bar_body_box2_top_right"></td>
</tr>
<tr id="bar_body_middle">
<td id="bar_body_box1_middle_left"></td>
<td id="bar_body_box1_body">
Welcome to PokerBrothers.net, bleh.
</td>
<td id="bar_body_merge_middle"></td>
<td id="bar_body_box2_body">
Load ad here
</td>
<td id="bar_body_box2_middle_right"></td>
</tr>
<tr id="bar_body_bottom">
<td id="bar_body_box1_bottom_left"></td>
<td id="bar_body_box1_bottom_fill"></td>
<td id="bar_body_merge_bottom"></td>
<td id="bar_body_box2_bottom_fill"></td>
<td id="bar_body_box2_bottom_right"></td>
</tr>
</table>
</div> </div>
</body>
</html>
And the CSS... Direct links: Some CSS that effects both bars: http://www.static.pokerbrothers.net...de?load=6&x=571 The top bar's css: http://www.static.pokerbrothers.net/css/headerbar.css the other bar's css: http://www.static.pokerbrothers.net/css/navbar.css I'm wondering if anybody has any clues as to why my site appears like this, i've spent hours and hours trying countless things but to no avail. Any help on anything related to this will be appreicated, thanks . Oh, and sorry for the lack of commenting in the CSS, it wasnt planned... It is quite messy A margin-top:10px is the equivalent of margin-top:11px on IE8 (compatibility mode). I actually took a screenshot and counted the number of pixels in Photoshop. This gives me a hell load of frustration because I want to align my comment form's submit button with the bottom of my textarea. For an example look at this (http://www.deliciousdays.com/archives/2009/10/07/stuffed-but-happy/#comments) scroll all the way down. I dunno how deliciousdays did it but they managed to get the button aligned with the textarea in both Firefox and IE. Anybody can help? Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest http://www.wwu.edu/~swing/newswingsite/index.html I'm relatively new at this, but I've been trying my hardest to learn how to do all of this while conforming to web standards. I've got my page looking almost (see below) like I want it to in Firefox, but in IE I get these ugly gaps. I used to get them in the inset box too, but I figured out a way to make them go away. I can't figure out how to make it go away in the header though. So my questions, so that I can actually learn something here, are these: What causes that big gap? How do I get rid of it? Is there a better/cleaner/simpler way to style the inset box so as to avoid the gaps? Also, you can see that there's one pixel missing in the gold border. That's from the blue top border so as to blend the rounded top border gif. Is there an easier way to add the rounded top? When I simply had no top border, things got screwy. Thank's for any help/insight you can give! i have the following CSS Code:
#logoOuter{
width:155px;
height:90px;
background-color:#336699;
position:relative;
float:left;
}
#logo{
bottom:0px;
position:absolute;
}
html>body #logo{
margin-bottom:-5px;
}
#globalNavOuter{
margin-left:155px;
background-color:#00CC99;
}
#globalNavTop{
height:19px;
}
#globalNavBottom{
height:71px;
}
and this XHTML Code: <div id="header" > <div id="logoOuter"> <div id="logo"> <img src="images/logo.gif" border="0" /> </div> </div> <div id="globalNavOuter"> <div id="globalNavTop">globla Nav Top</div> <div id="globalNavBottom">global nav bottom</div> </div> </div> The problem is there was a 5px gap at the bottom of the image in moz/FF and in IE when i took the whitespace out (the CR's) of the html the space went away in IE bot not MOZ/FF so i added a -5px margin to the bottom of that div and that did the trick in FF but it over did it in IE thus the sub selector > hack. [EDIT] I just took the image away and that fixes it. So it looks like it's the image causing it. doing a - vertical alignment seems to fix it but I still dont understand why... Gary perhaps you can explain this to me...i just dont get it Some days tables just seem so much easier........ |
|||||||