Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Flexform › Override theme font options.
New Landing › How can we help? › Themeforest Theme Support › Flexform › Override theme font options.
- This topic has 11 replies, 4 voices, and was last updated 10 years by
Kyle – SUPPORT.
Viewing 12 posts - 1 through 12 (of 12 total)
-
Posted in: Flexform
-
February 24, 2014 at 9:03 pm #51379
Hi Guys,
This should be a fairly simple request but I am struggling to figure it out.
Flexform currently offers 3 font options:
Standard Fonts
Google Fonts
Font DeckWhat if I want to use my own fonts or use a different 3rd party font provider, in my case typography.com.
I have added the link to the font in my header file and this is pulling in fine.
I am then calling the css for the font exact as the guidelines show, for example trying replace all the h tags or apply one style to body tag….regardless the site always defaults to the index value pulled in from the theme options!
How do I stop the theme using the theme options and use the style.css declarations?
Regards,
Lois
February 25, 2014 at 3:16 pm #51717Hi
Go to includes > sf-custom-styles.php and remove this code:
`// Font
$body_font_option = $options[‘body_font_option’];
$standard_font = $options[‘web_body_font’];
$google_standard_font = $google_heading_font = $google_menu_font = $google_font_one = $google_font_one_weight = $google_font_two = $google_font_two_weight = $google_font_three = $google_font_three_weight = $custom_fonts = “”;
if (isset($options[‘google_standard_font’])) {
$google_standard_font = explode(‘:’, $options[‘google_standard_font’]);
$google_font_one = str_replace(“+”, ” “, $google_standard_font[0]);
if (isset($google_standard_font[1])) {
$google_font_one_weight = $google_standard_font[1];
}
}
$fontdeck_standard_font = $options[‘fontdeck_standard_font’];
$headings_font_option = $options[‘headings_font_option’];
$heading_font = $options[‘web_heading_font’];
if (isset($options[‘google_heading_font’])) {
$google_heading_font = explode(‘:’, $options[‘google_heading_font’]);
$google_font_two = str_replace(“+”, ” “, $google_heading_font[0]);
if (isset($google_heading_font[1])) {
$google_font_two_weight = $google_heading_font[1];
}
}
$menu_font_option = $menu_font = $fontdeck_menu_font = “”;$fontdeck_heading_font = $options[‘fontdeck_heading_font’];
if (isset($options[‘menu_font_option’])) {
$menu_font_option = $options[‘menu_font_option’];
}
if (isset($options[‘web_menu_font’])) {
$menu_font = $options[‘web_menu_font’];
}
if (isset($options[‘google_menu_font’])) {
$google_menu_font = explode(‘:’, $options[‘google_menu_font’]);
$google_font_three = str_replace(“+”, ” “, $google_menu_font[0]);
if (isset($google_menu_font[1])) {
$google_font_three_weight = $google_menu_font[1];
}
}
if (isset($options[‘fontdeck_menu_font’])) {
$fontdeck_menu_font = $options[‘fontdeck_menu_font’];
}
`This is around line 104
– Kyle
September 25, 2014 at 10:20 am #114394Hi,
I’m looking for the exact same solution, but for Cardinal theme.
I tried to look for the string in question from Cardinals sf-custom-styles.css but apparently that’s not the way to go.Thanks again.
Joni
September 25, 2014 at 10:30 am #114400Hi
You can add this to your custom css:
body,p { font-family: "museo-slab"!important; } /* HEADING FONT */ h1, .impact-text,.impact-text-large { font-family: "museo-slab"!important; } h2,.blog-item .quote-excerpt { font-family: "museo-slab"!important; } h3 { font-family: "museo-slab"!important; } h4 { font-family: "museo-slab"!important; } h5 { font-family: "museo-slab"!important; } h6 { font-family: "museo-slab"!important; } /* MENU FONT */ #main-nav, #header nav, #vertical-nav nav, .header-9#header-section #main-nav, #overlay-menu nav, #mobile-menu, #one-page-nav li .hover-caption { font-family: "museo-slab"!important; }– Kyle
September 25, 2014 at 10:37 am #114404Thanks Kyle,
Currently I’ve used the
!importanttag, but using this method requires!importantto all type attributes i.e font sizes and spacing etc. that are still controlled by themes font settings, right?Is there a way to override themes font options with
@import url (/reset.css)or similar?-Joni
September 25, 2014 at 11:18 am #114424There’s no need for that in cardinal, go to Theme Options > Font Control and you can upload your own fonts and choose to use them
– Kyle
September 25, 2014 at 11:26 am #114431Ah, I see.
Question though, I have the webfont files in a folder where ther’s two types of files .css and .eot…
When uploading the .eot file WordPress uploared gives an error saying that “the file type is not permitted for security reasons.” and uploading the .css file nothing shows up on the theme panel.How should I go about with the font installation?
Thanks again
-Joni
September 25, 2014 at 6:20 pm #114636Hi,
If you would like to add your own @font-face fonts, then here are a few tips to do so. We’d recommend that you use the Font Squirrel web font generator, found here – http://www.fontsquirrel.com/tools/webfont-generator.You’ll need to upload your font files to your server via FTP, or you could upload them one by one to the WordPress Media Manager. Once you’ve uploaded them, you will need to reference them using the following css. You can add this to the custom css box within theme options, or within the child theme css if you are using a child theme. When you download the kit from Font Squirrel, you will find a file named “stylesheet.css” within the zipped folder. This file contains the full @font-face declaration for your uploaded font. We’ve placed a reference for you below:
@font-face { font-family: 'FONT_NAME'; src: url('FONT_URL.eot'); src: url('FONT_URL.eot?#iefix') format('embedded-opentype'), url('FONT_URL.woff') format('woff'), url('FONT_URL.ttf') format('truetype'), url('FONT_URL.svg#FONT_NAME') format('svg'); font-weight: normal; font-style: normal; } // BODY FONT body, h6 { font-family: "FONT_NAME", Arial, Helvetica, Tahoma, sans-serif; } // HEADINGS FONT h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .impact-text-large, .testimonial-text, .header-advert, .sf-count-asset .count-number, #base-promo, .sf-countdown, .sf-icon-character, .fancy-heading h1 { font-family: "FONT_NAME", Arial, Helvetica, Tahoma, sans-serif; }Thanks 🙂
With Best Regards
MohammadSeptember 25, 2014 at 9:02 pm #114662Hello again,
Thanks for this. I do have a question though, the process seems fairly similar to what I’m currently working with (I’m using webfonts from typography.com) and I think the EULA restricts me from wrangling the fonts through Font-squirrel so I think I’ll stick with typography.com.
My problem is, that I’d like to use relative definitions for font-size ie.
h2,.blog-item .quote-excerpt { font-size: 1.625em;!important; /* 1.625x body copy size = 26px */ line-height: 1.15384615; /* 30px / 26px */ }But the theme css over-rides this option as well as line-height and font-weight. Any pointer on how to solve this would be appreciated.
September 25, 2014 at 9:37 pm #114668Following up on previous. Decided to roll back to a method that’s been working earlier for me and I now have my child theme style.css set up as followed;
h1, .impact-text,.impact-text-large { font-family:'Gotham SSm A', 'Gotham SSm B';!important; font-weight: 700; font-style: normal; text-transform: uppercase; }But for some reason the !mportant qualifier is not working at all. So all font-attributes are now exactly as defined in the theme options. Any help would be appreciated.
-Joni
September 26, 2014 at 1:30 pm #114904HI,
Just wanted to let you know I solved the issue, just my own stupid mistake)
Sorry for the trouble.-Joni
September 26, 2014 at 1:31 pm #114905Ok great, no problem
– Kyle
-
Posted in: Flexform
Viewing 12 posts - 1 through 12 (of 12 total)
You must be logged in and have valid license to reply to this topic.