bassjobsen
commented
10 years ago Hi Mark,
The question seems simple, but the answer will be more complicated.
In the first place you have done things well!! I expect most of it should work after the last update.
I think you should discriminate between different situations:
1) All should work after activating theme (useful when selling your theme on http://themes.jbst.eu/) 2) All should work after activating AND RECOMPILING the LESS into CSS
In the first situation you can't add your font(s) with LESS due to this requires recompile your LESS. Alternativly you recompile and bundle the compiled CSS with your theme and disable the LESS compiler.
In most cases you also can't add custom code to {childtheme}/styles.css cause these styles can't be overruled by customizer's settings. But you are allowed to add your @font-face rules here.
You have find a solution for this case by adding echo 'h1, h2, h3 { font-family: '.get_theme_mod( 'heading_font_family', heading_font_family).'; to your custom template. This solution seems to work well but produce inline CSS. I still got some doubts about that. NOTE Google tells you its okay, you should prefer inline small pieces of code (CSS) above creating extra http requests (by enqueuing the code), see https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example. The big question here is your @font-face critical enough? (and what if you don't need it any more, cause you sellect a different font in the customizer?)
Your question about adding the font to the customizer when add it with LESS makes sense. Indeed and unfortunately it is not possible doing this with LESS direct. I have add an extra filter to add the font to the customizer:
function expo_add_custom_font($fonts)
{
return array_merge(array('MeteoconsRegular'=>'MeteoconsRegular'),$fonts);
}
add_filter('jbst_set_webfonts','expo_add_custom_font');You can add this to your functions.php
After doing this you should have to add the @font-face rules. I like your idea to use a template for this.
Finally i used this:
/* fonts */
if(!defined('heading_font_family'))define('heading_font_family','MeteoconsRegular');
/* add font when compiling */
add_filter('add_extra_less_code',function($less){ return $less."\n".'.include-custom-font("MeteoconsRegular","meteocons-webfont");';});
if(false === get_theme_mod('heading_font_family'))
{
/* additional css */
function add_custom_embedded_styles() { get_template_part('assets/css/custom'); }
add_action( 'wp_head', 'add_custom_embedded_styles', 100 );
}With: assets/css/custom.php:
<style type="text/css">
@font-face {
font-family: 'MeteoconsRegular';
src: url('<?php echo get_stylesheet_directory_uri() ?>/assets/fonts/meteocons-webfont.eot?v=1.0');
src: url('<?php echo get_stylesheet_directory_uri() ?>/assets/fonts/meteocons-webfont.eot?#iefix&v=1.0') format('embedded-opentype'),
url('<?php echo get_stylesheet_directory_uri() ?>/assets/fonts/fonts/meteocons-webfont.woff?v=1.0') format('woff'),
url('<?php echo get_stylesheet_directory_uri() ?>/assets/fonts/meteocons-webfont.ttf?v=1.0') format('truetype'),
url('<?php echo get_stylesheet_directory_uri() ?>/assets/fonts/meteocons-webfont.svg?v=1.0#meteoconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
<?php
echo 'h1, h2, h3 { font-family: '.get_theme_mod( 'heading_font_family', heading_font_family).'};';
?>
</style>Note this will only add the @font-face inline if no heading_font_family have been set.
If a new (or the same ) font is selected via the customizer, saving will recompile and compiles the 'add_extra_less_code' too.
The second situation which allow recompile after activation is more simple.
add the code below to your functions.php will do the trick:
function expo_add_custom_font($fonts)
{
return array_merge(array('MeteoconsRegular'=>'MeteoconsRegular'),$fonts);
}
add_filter('jbst_set_webfonts','expo_add_custom_font');
function jbst_child_set_defaultoptions() {
/* fonts */
if(!defined('heading_font_family'))define('heading_font_family','MeteoconsRegular');
/* add font when compiling */
add_filter('add_extra_less_code',function($less){ return $less."\n".'.include-custom-font("MeteoconsRegular","meteocons-webfont");';});
/* add the above code to custom.less will have the same effect */
}Note in both situation web font files (.woff, .eot) are add to assets/fonts/.
question from @mjteves1986: My purpose of this is to make a childthemes. The user try to install my childtheme it will set to the right layout,setting or everything.
code
I was confuse if the new font family I include on the less will include on that $fontchoices. I think not possible. So that If we use the less compiler to include new font family, the font family will not include on that options on $fontchoices.
On my childtheme now, I create another $fontchoices called $childfontchoices and I include my new font on the " Array ". Here is my code sample to include my new font family in my $childfontchoices:
On my childtheme custom.css:
On my childtheme template-customizer.php:
On my functions.php:
Note: Im not include the other code that not include on my sample