...

View Full Version : Quick Safari font question!



no name
02-01-2007, 10:21 AM
Hi

I'm working on a site at the moment and for some reason the fonts I've specified in the <body> tag don't filter through the whole page when viewed in Safari.

Here's the css (don't laugh at the fonts - not my idea!!)

body {
font-family: "Kristen ITC", "Curlz MT", Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
color: #336600;
}
Works fine on all Windows browsers but my Mac only displays the font 'Curlz MT' in some parts of the page with Safari.

I haven't come accross this before and can't find anything about it. I tried applying the font list to individual divs but still no good.

I'm sure there must be a simple fix!?

codingmasta
02-01-2007, 10:47 AM
remove the quotes

body {
font-family: "Kristen ITC", "Curlz MT", Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
color: #336600;
}

to

font-family: Kristen ITC, Curlz MT, Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
color: #336600;
}

no name
02-01-2007, 10:54 AM
Thanks for the reply codingmaster. Unfortunately it hasn't solved the problem.

Any other ideas?

codingmasta
02-01-2007, 11:05 AM
Ok I rewrite the code and fixed it.
In this, I removed the margin and padding because they are just 0px...


body
{
font-family: Kristen ITC, Curlz MT, Verdana, Arial, Helvetica, sans-serif;
color: #336600;
}

no name
02-01-2007, 11:26 AM
Many thanks for your help again codingmaster but I'm afraid it still doesn't work on all the text. This is quite strange!!

codingmasta
02-01-2007, 11:41 AM
you browser using is safari...just use ie
Another thing is you should have cookie enabled
If not, everything displays stupid

VIPStephan
02-01-2007, 11:43 AM
Ok I rewrite the code and fixed it.
In this, I removed the margin and padding because they are just 0px...


body
{
font-family: Kristen ITC, Curlz MT, Verdana, Arial, Helvetica, sans-serif;
color: #336600;
}


I don't see what this has to do with the font not being displayed?
As to the quotes it's better to have them around font names that consist of more than one words.
And as to the font being only partly displayed I haven't seen such a behavior too. Could we probably see the entire code or a link to the page? What about other fonts (like if you use standard fonts)? Would they be displayed entirely?



you browser using is safari...just use ie
Another thing is you should have cookie enabled
If not, everything displays stupid

And that's the most stupid advice I've seen in a while.

no name
02-01-2007, 11:43 AM
I use Firefox and IE on my Windows machine but Safari on my Mac. Most Mac people use Safari so I wanted to get this code to work if possible.

Bill Posters
02-01-2007, 11:46 AM
remove the quotes

I don't think that would be likely to work. Compound font names - those which contain spaces - should be contained within quotes to ensure maximum compatibility.
http://www.w3.org/TR/REC-CSS1#font-family


In this case, it may be that Safari recognises the font under a slightly different name. (I once experienced a similar problem with Opera vs. all other browsers.)
See how the name appears in the font menu of other Mac apps.

Let us know if it helps.

codingmasta
02-01-2007, 11:49 AM
don't joke.
http://img473.imageshack.us/img473/4044/screenshot010tn9.jpg (http://imageshack.us)
http://img490.imageshack.us/img490/3575/screenshot015wi9.th.jpg (http://img490.imageshack.us/my.php?image=screenshot015wi9.jpg)

no name
02-01-2007, 12:21 PM
Thanks Bill Posters. The strange thing about this issue is that the font (in my Mac's case 'Curlz MT') works on some parts of the page so it must be recognized.

It's as if there's something blocking it on some parts of the page but the only place the fonts are defined is in the css body attribute.

I thought this was going to be an easy fix!!!

Bill Posters
02-01-2007, 12:27 PM
Sounds like a css rule conflict / specificity issue.
You may need to be more verbose about setting the fonts for the those elements/portions which aren't currently using the font when they should.

Any chance of seeing the site and stylesheet(s) in question?

VIPStephan
02-01-2007, 12:27 PM
Try to specifically set the font again for the section where t doesn't show up and see what happens. And can you please show your code (or a link) so I could test it myself?

no name
02-01-2007, 01:00 PM
Thanks for all the replys guys

Please don't be too harsh on me - this site is still very much under construction!!! I tried to target elements specificaly and they still wouldn't work.


Here's a link http://www.toffeeandtilly.co.uk/index2.htm

And here's the css:


body {
font-family: "Kristen ITC", "Curlz MT", Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
color: #336600;
}
h1 {
font-size: 14px;
}

h5 {
margin: 0px;
padding: 0px;
font-size: 10px;
display: inline;
}

#wrap {
width: 700px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
background-image: url(../images/main_bg.gif);
background-repeat: repeat-y;
background-position: center 122px;
}

#wrap #header {
padding-top: 18px;
background-image: url(../images/main_bg_top.gif);
background-repeat: no-repeat;
background-position: center top;
background-color: #FFFFFF;
}
#topBox {
width: 100%;
}

#cartBg {
height: 110px;
background-image: url(../images/cart_bg.gif);
background-repeat: no-repeat;
background-position: right top;
width: 430px;
vertical-align: middle;
margin-top: auto;
margin-right: 0px;
margin-bottom: auto;
margin-left: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}


#wrap #header #cartStatus {
text-align: left;
display: inline;
margin-left: 255px;
float: right;
}
#wrap #header #cartStatus td {
border: 1px none #FFFFFF;
padding: 4px;
font-size: 10px;
width: 165px;
}
#cartStatus a {
font-size: 10px;
color: #CB3298;
text-decoration: none;
}
#cartStatus a:hover {
color: #FFFFFF;
}
#bskt {
background-image: url(../images/cart_bg_list.gif);
background-repeat: repeat-x;
background-position: left center;
height: 30px;
font-size: 10px;
padding-left: 30px;
margin: 0px;
text-align: left;
}
#bskt li {
list-style-type: none;
display: inline;
padding-right: 5px;
padding-left: 5px;
margin: 0px;
}
#bskt a {
font-size: 10px;
text-decoration: none;
color: #CB3298;
}
#bskt a:hover {
color: #FFFFFF;
}

#pictures {
float: left;
width: 255px;
padding-bottom: 5px;
margin: 5px;
}
#navigation {
width: 180px;
float: left;
font-size: 14px;
line-height: 30px;
margin-top: 10px;
}
#mainNav {
margin: 0px;
padding: 0px;

}
#mainNav li {
background-image: url(../images/buttonBg.gif);
background-repeat: no-repeat;
background-position: center center;
height: 30px;
width: 180px;
text-align: center;
}
#mainNav #home a {
width: 180px;
color: #336600;
text-decoration: none;
font-weight: bold;
display: block;
}
#mainNav #home a:hover {
color: #FFFFFF;
}

#categoryNav, #mainNav, #subNav {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}
#categoryNav li {
font-family: "Kristen ITC", "Curlz MT", Verdana, Arial, Helvetica, sans-serif;
background-image: url(../images/buttonBg2.gif);
background-repeat: no-repeat;
background-position: left center;
margin-top: 1px;
margin-bottom: 1px;
height: 30px;
padding-left: 8px;
}
#categoryNav a {
text-decoration: none;
color: #FFFFFF;
display: block;
height: 30px;
font-weight: bold;
}
#categoryNav a:hover {
color: #99CC33;
}



#pictures img {
border: 1px solid #CB3298;
}
#words {
float: left;
width: 420px;
background-color: #99CC33;
color: #FFFFFF;
padding: 5px;
font-size: 12px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 30px;
}


.leftFloat {
float: left;
}

#wrap #header, #wrap #content {
padding-right: 20px;
padding-left: 20px;
}

#wrap #bottom {
clear: both;
background-image: url(../images/main_bg_btm.gif);
background-repeat: no-repeat;
background-position: center bottom;
background-color: #FFFFFF;
padding-left: 15px;
height: 58px;
}
#subNav {
list-style-type: none;
display: inline;
width: 400px;
height: 30px;
}
#footerNav {
background-image: url(../images/footernavbg.gif);
background-repeat: no-repeat;
background-position: left top;
height: 35px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
}

#subNav li {
display: inline;
padding-right: 10px;
padding-left: 10px;
}
#subNav a {
color: #336600;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
#subNav a:hover {
color: #FFFFFF;
}
#nnns {
width: 25px;
margin-left: 255px;
padding-top: 10px;
display: inline;
}

rmedek
02-01-2007, 04:12 PM
Safari is pickier about its fonts than other browsers. It might be that certain font-styles you are using aren't supported in the font (like bold or italics)—some browsers will display a "faux" version of an unsupported style, and some won't. As far as I know, rather than display the faux style, Safari will substitute the style of the next font down. Also, notice that computers can recognize font names differently; i.e., a PC might recognize "Kristen ITC" while a Mac might only recognize "ITC Kristen Book" or the like—same font, different name.

Unless it's a globally available font (Verdana, Arial, etc.) I'd recommend using images and one of any image-replacement techniques, or something like SIFR.

Hope this helps…

no name
02-01-2007, 10:16 PM
Right....

Firstly, thanks to everyone who's tried to help me on this issue - it's much appreciated.

For those who are interested here's the (unsatisfactory) answer!
rmedek's is right. The font (in this case Curlz MT) on the Mac doesn't display if the text is bold or italic. I changed the code of an H5 heading that I noticed was displaying in Helvetica rather than Curlz and made it display 'normal' instead of the default 'bold'. The text then displayed in Curlz.

So there you are - more 'unusual' fonts are a waste of time on Safari if they're HTML. I'm just going to let it display in Helvetica on the Mac!!!

rmedek
02-01-2007, 10:25 PM
more 'unusual' fonts are a waste of time on Safari if they're HTML.

Actually, they're a waste of time, period. Fonts in HTML are only displayed if they're installed and active on the person's computer, regardless what browser or OS they're using. For example, I have Curlz installed but not activated, so I'll always see Helvetica, italic, Safari, or no. A PC without Curlz installed will never see Curlz.

If you want to use more unusual fonts, it's really best to use images or a dynamic font replacement method like SIFR.

Arbitrator
02-01-2007, 11:20 PM
don't joke.
http://img473.imageshack.us/img473/4044/screenshot010tn9.jpg (http://imageshack.us)
http://img490.imageshack.us/img490/3575/screenshot015wi9.th.jpg (http://img490.imageshack.us/my.php?image=screenshot015wi9.jpg)Just because something works doesn’t mean that you should do it. The good practice method (using quotation marks) doesn’t cause any compatibility problems or require much effort, so there’s no reason not to use it.


Actually, they're a waste of time, period. Fonts in HTML are only displayed if they're installed and active on the person's computer, regardless what browser or OS they're using. …

If you want to use more unusual fonts, it's really best to use images or a dynamic font replacement method like SIFR.This is why you’re allowed to list fonts so that the user agent (browser) can sift through the list until it finds one that it can display. In the worst case, none of the named fonts will be used and the author‐chosen generic font keyword at the end of the list will determine the font the browser chooses (serif, sans-serif, monospace, fantasy, cursive). Unless the font is absolutely required for the purpose, like on this page (http://www.sf.airnet.ne.jp/ts/japanese/shape.html) comparing different fonts, or the designer is going to commit suicide if their font doesn’t get used, it should be fine just using the list.

rmedek
02-01-2007, 11:41 PM
This is why you’re allowed to list fonts so that the user agent (browser) can sift through the list until it finds one that it can display.

Right, but why compromise the design of the website? If the overall look and feel is relying on the feel of the navigation, I wouldn't leave that up to chance.

Looking at the example site shown, the navigation in Helvetica makes it look like one of those generic domain placeholder search sites. Helvetica is a poor substitution for Curlz, don't you think? :eek:

Arbitrator
02-02-2007, 12:28 AM
Right, but why compromise the design of the website? If the overall look and feel is relying on the feel of the navigation, I wouldn't leave that up to chance.

Looking at the example site shown, the navigation in Helvetica makes it look like one of those generic domain placeholder search sites. Helvetica is a poor substitution for Curlz MT, don't you think? :eek:I guess it’s a matter of opinion then. Personally, I think it looks just fine with a sans‐serif font. I looked at it with Kristen ITC, Curlz MT, and Verdana and they all looked fine, though Curlz MT looked the worst IMO due to readability. I couldn’t view it with Helvetica since I don’t have that font. I’d say that, even with the correct fonts, it looks like a placeholder site though because it is: there is no content yet.

You can use images, but then if you want to change the text, you have to edit an image, your site is slower and uses more bandwidth, and you sacrifice the ability to zoom the text size, at least, in Firefox and Internet Explorer 6. Then again, that site isn’t accessible to text‐resizing, either way, by the looks of the overlapping I’m seeing.

Anyway, the first two listed fonts are cursive in style, so it might be more appropriate (for the design) to use cursive font fall‐backs, instead of sans‐serif fall‐backs. Example:


font: "Kristen ITC", "Curlz MT", cursive;

The font that would usually be substituted if the cursive keyword was the fall‐back is Comic Sans MS, which looks fine from here. Of course, the fall‐backs are also an aspect of the design, so maybe sans‐serif font fall‐backs are fine (according to the designer).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum