Override theme font options.

[LoisClarke]

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 Deck

What 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

[Kyle – SUPPORT]

Hi

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

[Joni]

Hi,

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

[Kyle – SUPPORT]

Hi

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

[Joni]

Thanks Kyle,

Currently I’ve used the !important tag, but using this method requires !important to 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

[Kyle – SUPPORT]

There’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

[Joni]

Ah, 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

[Mohammad – SUPPORT]

Hi,
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
Mohammad

[Joni]

Hello 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.

[Joni]

Following 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

[Joni]

HI,
Just wanted to let you know I solved the issue, just my own stupid mistake)
Sorry for the trouble.

-Joni

[Kyle – SUPPORT]

Ok great, no problem

– Kyle