[skafte]

I guess I’ll just have to do a lot of CSS styling? If that’s the only solution, then no worries :-) I’ll drink a big cup of coffee and get going with it. Was just wondering if there would be any easier ways – like adding a tag to the ‘Headings font’ field or something…

Thanks,

J

[skafte]

Thanks Andrii!

Sorry to get back to you on this one, but I’ve run into another problem with the self-hosted font.

The issue is now that I get faux-italic and bold browser styles in normal texts(!). It worked fine before when, for example, I wrote ‘Circular Black’ in the ‘Headings font’ field, because the weights were still in separate families then. I have now made them all the same family, in order to avoid the issue of faux styles, and given each font file a style (find examples below). Here are the instructions I followed:

http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles

–but then now I cannot define styles in the ‘Typography’ section of the Themes Options as I can only add the font family and not the weight!? This means that the weight is the same all over the site except for in normal texts where the bold is defined by a ‘b’ or ‘strong’ html tag.

I hope that makes sense. If not, do let me know.

Any suggestions on how to best solve this?

Thanks, and again, sorry to get back to you on this one.

Jonas

—

@font-face {
font-family: ‘Circular’;
src: url(‘fonts/lineto-circular-mediumitalic.eot’);
src: url(‘fonts/lineto-circular-mediumitalic.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/lineto-circular-mediumitalic.woff’) format(‘woff’),
url(‘fonts/lineto-circular-mediumitalic.ttf’) format(‘truetype’),
url(‘fonts/lineto-circular-mediumitalic.svg#CircularMediumItalic’) format(‘svg’);
font-weight: 600;
font-style: italic;
}

@font-face {
font-family: ‘Circular’;
src: url(‘fonts/lineto-circular-bold.eot’);
src: url(‘fonts/lineto-circular-bold.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/lineto-circular-bold.woff’) format(‘woff’),
url(‘fonts/lineto-circular-bold.ttf’) format(‘truetype’),
url(‘fonts/lineto-circular-bold.svg#CircularBold’) format(‘svg’);
font-weight: 700;
font-style: normal;
}

—

• This reply was modified 10 years, 8 months ago by skafte.

[skafte]

Might make more sense to you if I send you a link to my development page: http://theme.alternativet.dk/ – where you can see the difference between how the project hover reacts… NB. All projects have the same excerpt: ‘Testing hover’.

Thanks,

Jonas

[skafte]

Hi again,

Don’t worry! I found out myself how to do it; I just added the @fontface CSS styles to the actual CSS stylesheet instead of into the Custom CSS field in the Theme Options panel, and then it worked – voilá!

Thanks anyway,

Jonas

[Author]

Posts