Ability to add custom fonts to drop down menu

This topic has 8 replies, 4 voices, and was last updated 9 years by Andrei.

Author

Tagged: custom, fonts
June 24, 2015 at 21:26 #64748

wbishop
Participant

According to Moderator Catalin here, it’s not possible to add a custom font to the pull down menu on the theme options page(s).

This would be a very useful feature as many clients use custom fonts as part of their corporate identification standards and expect their Kleo-themed sites to conform. Getting “close” with Google look-alikes is not always acceptable…

Thanks!
June 24, 2015 at 21:35 #64751

Andrei
Moderator
Meanwhile a workaround would be to use the following code snippet which should be added to your functions.php file:
COPY CODE
```
add_filter('sq_option', 'kleo_custom_fonts', 10, 2);
function kleo_custom_fonts($output_data, $option){
    if(in_array($option, array('font_body', 'font_h1', 'font_h2', 'font_h3', 'font_h4', 'font_h5', 'font_h6'))){
        $output_data['font-family'] = "Arial"; // Add your custom font name here
    }
    return $output_data;
}
```
After adding this and putting in your font name, you will have to go to “Theme Options > Fonts” and select in all drop downs a default web font like for example Arial ( so that we prevent the load of extra google fonts ), and save the options, this will regenerate the css file of the theme and will gonna override the options form the theme panel with the ones added with the above code snippet.

An extra note would be that you’ll need to manually load the font files in the theme.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
June 24, 2015 at 23:50 #64784

wbishop
Participant

Hi-

Thanks, Andrei.

This does change the font as desired. Still not in the drop down lists, but not expected to be I gather. Also, I presume the functions.php file will override the Theme Options > Fonts settings should our client try to change them there for any reason, correct?

I note that when the site first appears, all the fonts are displayed as serif fonts (Times New Roman or equivalent) but then change to the custom font. As I’d changed all the Theme Options > Fonts to Arial, Helvetica, sans serif, I don’t quite understand why it defaults to the serif, but presume that’s the no-style-at-all default?

I don’t suppose there’s any way to accelerate the display of the custom fonts, is there? Any suggestions would be much appreciated!

Thanks again for your help!

June 24, 2015 at 23:54 #64788

wbishop
Participant

PS –

I used the Typekit Fonts for WordPress plugin to add the custom fonts, but wonder whether manually adding them to the Kleo-child header.php file might improve the font load time?

The trade off, of course, is that this would have to be repeated if the theme is updated (no?) while using the plugin should do this automatically.

Thanks again!

June 25, 2015 at 00:30 #64801

Andrei
Moderator

Hi,

No, the font won’t be loaded in the theme options panel, this is just a small hack to force overriding the value written in the css file so that you can use an extra font which you loaded manually.

There isn’t any difference, you can use a plugin to load your font file or you can use the child theme functions to inject code in wp_head. The child theme won’t be touched during theme update so it’s safe to make any modifications in there.

Let me know if you need any more help with this.
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

June 25, 2015 at 18:06 #64914

wbishop
Participant

Thanks again!

July 23, 2015 at 11:34 #69579

MScDre
Participant

This would be most welcome, I was trying to add Bebas Neue in such a way that it is selectable from inside VC blocks and via the Theme settings but I see no way of doing it without modifying the parent theme, because theme options are a part of the theme framework and are in the parent theme. And there is no filter given in the parent theme to change the font option field.

September 19, 2015 at 20:59 #78521

TheZorro
Participant

I can only support the request. I don’t want to intervene too much in the KLEO-files and every plugin I don’t need means more resources available for other stuff 😉

September 30, 2015 at 01:05 #79956

Andrei
Moderator

For the moment the best solution is the given one above. For using fonts in other plugins like sliders, you should contact their authors or create some styling rules.

Let me know if I can help you with anything else.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Author

Posts