Click to See Complete Forum and Search --> : different font on mac and pc


sudhakararaog
03-22-2010, 04:55 AM
from the design in photoshop i have used the following for body tag and for few header tags like h1, h2, h3

body {
margin: 0;
padding: 0;
font: normal 12px Lucida Grande, Arial, Helvetica, sans-serif;
background: #fff;
color: #000;
}

h1{
font: bold 30px Gotham, Arial, Helvetica, sans-serif;
}

h2{
font: bold 15px Gotham, Arial, Helvetica, sans-serif;

}

on a mac the font for the content appears as Lucida Grande and for the headings as Gotham with the font size i have set on all browsers
firefox, chrome, safari

however on a pc on all browsers ie 6,7,8, firefox, chrome, safari for the content and headings these browsers on a pc are not showing Lucida Grande and Gotham instead they are displaying as Arial

i have also tried

font: normal 12px "Lucida Grande", Arial, Helvetica, sans-serif;

as Lucida Grande is 2 separate words even then i am not getting the correct font only on a pc

i have used the method for different css for mac and pc from
http://www.dynamicdrive.com/dynamicindex9/dyncss.htm

in the external pcstyle.css i have written

body {
margin: 0;
padding: 0;
font: normal 12px "Lucida Grande", Arial, Helvetica, sans-serif !important;
background: #fff;
color: #000;
}


even with the pcstyle.css on a pc the browsers are not showing the body content in Lucida Grande font

the page content is within a div called content in the pcstyle.css i also added

#content{
font: normal 12px "Lucida Grande", Arial, Helvetica, sans-serif !important;
}
but the browsers do not show the content in Lucida Grande on a pc


i have a global reset file as

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, input, textarea, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}


i have tried commenting these styles and also removed the line where i was calling this global reset file inspite of all this the browsers on pc are not displaying in Lucida Grande on a pc

please advice how i can fix this.

i guess if i can fix for the body content i will be able to fix for the headings as well which have a Gotham font


thanks.

Fang
03-22-2010, 05:47 AM
Lucida Grande is not a standard font for Windows: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Try:font: normal 12px 'Lucida Sans Unicode', 'Lucida Grande', Arial, Helvetica, sans-serif;You must quote multi-word font names.

Major Payne
03-23-2010, 09:22 PM
Same question by you was answered here (http://www.htmlcodetutorial.com/help/ftopic17856.html). :D