Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Quick Safari font question!

    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!!)
    Code:
    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!?

  • #2
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply codingmaster. Unfortunately it hasn't solved the problem.

    Any other ideas?

  • #4
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I rewrite the code and fixed it.
    In this, I removed the margin and padding because they are just 0px...
    Code:
    body
    {
    font-family: Kristen ITC, Curlz MT, Verdana, Arial, Helvetica, sans-serif;
    color: #336600;
    }

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks for your help again codingmaster but I'm afraid it still doesn't work on all the text. This is quite strange!!

  • #6
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you browser using is safari...just use ie
    Another thing is you should have cookie enabled
    If not, everything displays stupid

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by codingmasta View Post
    Ok I rewrite the code and fixed it.
    In this, I removed the margin and padding because they are just 0px...
    Code:
    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?

    Edit:
    Quote Originally Posted by codingmasta View Post
    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.

  • #8
    New Coder
    Join Date
    Aug 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by codingmasta View Post
    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.

  • #10
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    don't joke.


  • #11
    New Coder
    Join Date
    Aug 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!!

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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?

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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?

  • #14
    New Coder
    Join Date
    Aug 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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;
    }

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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…


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •