11 years 8 months ago
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