Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Flexform › custom webfonts using @font-face
New Landing › How can we help? › Themeforest Theme Support › Flexform › custom webfonts using @font-face
Tagged: advice, css classes, custom css, custom webfonts, fontdeck, format, google, help, http, parts, single piece, site, src, text, Thanks, thing, url
-
Posted in: Flexform
-
April 14, 2013 at 5:44 pm #1602
I have bought a webfont which is not available on Google or FontDeck. So I tried to add it using Custom CSS. The thing is that I really want every single piece of text on the whole site to use this font. Could you please give me some advice (css classes?).
I’m using @font-face and so far it works for some parts of the site.
This is what I have so far:
@font-face {font-family: ‘TheSerifBasicRegular’; src: url(‘http://www.xyz.com/theserif_b5_-webfont.eot’); src: url(‘http://www.xyz.com/theserif_b5_-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘http://www.xyz.com/theserif_b5_-webfont.woff’) format(‘woff’), url(‘http://www.xyz.com/theserif_b5_-webfont.ttf’) format(‘truetype’), url(‘http://www.xyz.com/theserif_b5_-webfont.svg#TheSerifBasicRegular’) format(‘svg’); font-weight: normal; font-style: normal;}
body {font: ‘TheSerifBasicRegular’, Georgia, serif;}
Thanks for your help!
April 14, 2013 at 5:58 pm #1605It’s me again. Sorry for the strange title. This should be another question…
Correct title: custom webfonts using @font-face
also the smileys are strange. here is the css again:
@font-face {
font-family: ‘TheSerifBasicRegular’;
src: url(‘http://www.xyz.com/theserif_b5_-webfont.eot’);
src: url(‘http://www.xyz.com/theserif_b5_-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘http://www.xyz.com/theserif_b5_-webfont.woff’) format(‘woff’), url(‘http://www.xyz.com/theserif_b5_-webfont.ttf’) format(‘truetype’), url(‘http://www.xyz.com/theserif_b5_-webfont.svg#TheSerifBasicRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body {
font: ‘TheSerifBasicRegular’, Georgia, serif;
}
April 15, 2013 at 3:03 pm #1663Try this for the body CSS:
body * {font-family: ‘TheSerifBasicRegular’, Georgia, serif !important;}
Regards,
————————————————————————————————————Cosmin
Support AssistantApril 15, 2013 at 4:43 pm #1679Thank you for your help Cosmin! That works!
Although I noticed that now the small icon/arrow after some links (i.e. “find out more >“) is gone. Any suggestions?
Kind Regards,
Tom
April 15, 2013 at 11:34 pm #1720Hmm ok, instead of using the above code, use this:
body, h6, #sidebar .widget-heading h3, #header-search input, .header-items h3.phone-number, .related-wrap h4, #comments-list > h4, .item-heading h1, .sf-button, button, input[type="submit"], input[type="reset"], input[type="button"], input[type="email"], .spb_accordion_section h3, #header-login input, #mobile-navigation > div, h1, h2, h3, h4, h5, .heading-font, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .testimonial-text, .header-advert { font-family: ‘TheSerifBasicRegular’, Georgia, serif !important; }
– Ed
April 16, 2013 at 7:10 pm #1832Wonderful! That’s fine now! Thank you!
Tom
-
Posted in: Flexform
You must be logged in and have valid license to reply to this topic.