on my site sound.drewboles.com, I am using an embedded font. The italicizing of the font, however, is not working in Safari on my computer. I can see italics in Safari on the iPad and iPhone, and I can see them in Firefox (on the computer). But for some reason, not Safari. Is this an issue with my local browser settings, or can it be fixed in the template code?

Have you checked Chrome to see if that renders ok?

Some browsers just don't like some fonts or a font weight that is applied

I know this to my cost as yesterday I had firefox rendering my raleway font thinner than anywhere else - changed the font colour

wasn't very pleased when I found that out

Cheers
Paul

Hi Paul -
I checked Google Chrome, and it also is not displaying the italics properly.

Here's the weird thing though - I got this font from a free template that I was previously using, but scrapped in favor of OnePage. I still have that template installed, and when temporarily switch to it, italics are displayed properly, in both Safari and Chrome.

I don't know if this means there's some gremlin lurking in the code that is preventing it on these browsers. Strangely enough, Safari on my iPhone and iPad display the italics just fine.

I realize this is probably something that warrants creating a new ticket, but any immediate ideas as to what might be causing this problem? Thanks!

Drew

There can be a few factors regarding fonts

Font weight, font style. line-height and sometimes browser specific styling e.g. moz or webkit

All these can affect how a font renders

Are the styles both the same in the free template and this one?

Cheers
Paul

Hi Paul -
Well, the plot thickens. I started playing around more with the fonts. It's so strange that when I simply switch to the free template, Safari and Chrome will display italics.

In the free template, there is a stylesheet.css file with the @font-face code for the embedded fonts. I tried just copying that into my custom.css file (replacing the @font-face stuff I had put in there before). Strangely enough, it did not fix my italics problem, but also suddenly made my iPad and iPhone no longer read the font and revert to the default serif font. (Why this didn't also happen on my computer browsers, I have no idea!)

My original code (which I have now put back in) is:
@font-face {font-family: Miso;src: url(../fonts/miso-webfont.eot);}
@font-face {font-family: "Miso";src:local("Miso"), url(../fonts/miso-webfont.ttf) format("truetype");}
.font-family-miso h1, .font-family-miso h2.title, .font-family-miso .rt-joomla .user legend, .font-family-miso .rt-joomla .contact legend, .font-family-miso .componentheading , .font-family-miso .edit-article legend {font-family: Miso,Helvetica,Arial,sans-serif;letter-spacing: normal;font-weight: normal;}
@font-face {
font-family: Miso;
src: url(../fonts/miso-bold-webfont.ttf);
font-weight: bold;
}


The stylesheet code that I tried to put in was this (and I did change the code to reflect the appropriate path to the embedded font files):

html body {background: #4C0B5F}
#navwrap .zen-container { background: none repeat scroll 0 0 #4C0B5F;}
body #logowrap {background: none repeat scroll 0 0 #4C0B5F;}
#navwrap.affix {background: #4C0B5F;}
#bannerwrap .zen-container {padding: 60px 2em;}
#grid1wrap h1, #grid1wrap h2, #grid1wrap h3, #grid1wrap h4, #grid1wrap h5, #grid1wrap h6 {
padding: 0 0.75em;
}

p {padding: 0 1em;}

@media (max-width: 800px) {
#navwrap .nav-collapse {padding: 15px 0px;}
}

/* Generated by Font Squirrel (www.fontsquirrel.com) on May 31, 2013 */



@font-face {
font-family: 'misolight';
src: url('miso-light-webfont.eot');
src: url('miso-light-webfont.eot?#iefix') format('embedded-opentype'),
url('miso-light-webfont.woff') format('woff'),
url('miso-light-webfont.ttf') format('truetype'),
url('miso-light-webfont.svg#misolight') format('svg');
font-weight: normal;
font-style: normal;

}




@font-face {
font-family: 'misoregular';
src: url('miso-webfont.eot');
src: url('miso-webfont.eot?#iefix') format('embedded-opentype'),
url('miso-webfont.woff') format('woff'),
url('miso-webfont.ttf') format('truetype'),
url('miso-webfont.svg#misoregular') format('svg');
font-weight: normal;
font-style: normal;

}




@font-face {
font-family: 'misobold';
src: url('miso-bold-webfont.eot');
src: url('miso-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('miso-bold-webfont.woff') format('woff'),
url('miso-bold-webfont.ttf') format('truetype'),
url('miso-bold-webfont.svg#misobold') format('svg');
font-weight: normal;
font-style: normal;

}



I'm wondering if there is something else in the template.css of the other template that is needed to make this font code work properly? I know that Safari and Chrome are capable of rendering this font in italics, but I don't know how to make it happen with the onepage template. Grrr...

Drew

OK, I just tried one more thing, which was simply to remove the embedded font code to see what the browsers would do. When I removed it, though, the font did not revert to a serif font like on the iPad as I would expect. I emptied my cache on Firefox, Chrome, and Safari, but it didn't make any difference. Now I'm wondering if my browsers are lying to me!

Drew

Different browsers will render fonts differently

Not all Browsers / Operating Systems have the same fonts so depending on how fonts are added they may act differently

If the browser doesn't have a font it can render using the code it will revert to the browser default font which would be whatever its set as

I'd experiement with changing some of the font values to see it it can be improved on the webkit browsers

Cheers
Paul