Typography (Customizer.php)

[bassjobsen]

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

global $fontchoices;
/* Websafe Fonts */ $fontchoices = array( 'Helvetica Neue' => 'Helvetica Neue', 'Arial' => 'Arial', 'Lucida Bright' => 'Lucida Bright', 'Georgia' => 'Georgia', 'Times New Roman' => 'Times New Roman', /* Google Fonts */ 'Abel' => 'Abel', 'Amaranth' => 'Amaranth', 'Amatic+SC' => 'Amatic SC', 'Anonymous+Pro' => 'Anonymous Pro', 'Anton' => 'Anton', 'Architects+Daughter' => 'Architects Daughter', 'Arimo' => 'Arimo', 'Arvo' => 'Arvo', 'Asap' => 'Asap', 'Bitter' => 'Bitter', 'Black+Ops+One' => 'Black Ops One', 'Bree+Serif' => 'Bree Serif', 'Cabin' => 'Cabin', 'Cabin+Condensed' => 'Cabin Condensed', 'Calligraffitti' => 'Calligraffitti', 'Cantarell' => 'Cantarell', 'Changa+One' => 'Changa One', 'Cherry+Cream+Soda' => 'Cherry Cream Soda', 'Chewy' => 'Chewy', 'Chivo' => 'Chivo', 'Coming Soon' => 'Coming Soon', 'Copse' => 'Copse', 'Covered+By+Your+Grace' => 'Covered By Your Grace', 'Crafty+Girls' => 'Crafty Girls', 'Crimson+Text' => 'Crimson Text', 'Crushed' => 'Crushed', 'Cuprum' => 'Cuprum', 'Dancing+Script' => 'Dancing Script', 'Dosis' => 'Dosis', 'Droid+Sans' => 'Droid Sans', 'Droid+Sans+Mono' => 'Droid Sans Mono', 'Droid+Serif' => 'Droid Serif', 'Exo' => 'Exo', 'Francois+One' => 'Francois One', 'Fredoka+One' => 'Fredoka One', 'Gloria+Hallelujah' => 'Gloria Hallelujah', 'Goudy+Bookletter+1911' => 'Goudy Bookletter 1911', 'Happy+Monkey' => 'Happy Monkey', 'Homemade+Apple' => 'Homemade Apple', 'Istok+Web' => 'Istok Web', 'Josefin+Sans' => 'Josephin Sans', 'Josefin+Slab' => 'Josefin Slab', 'Judson' => 'Judson', 'Just+Me+Again+Down+Here' => 'Just Me Again Down Here', 'Kreon' => 'Kreon', 'Lora' => 'Lora', 'Lato' => 'Lato', 'Limelight' => 'Limelight', 'Lobster' => 'Lobster', 'Luckiest+Guy' => 'Luckiest Guy', 'Marvel' => 'Marvel', 'Maven+Pro' => 'Maven Pro', 'Merriweather' => 'Merriweather', 'Metamorphous' => 'Metamorphous', 'Molengo' => 'Molengo', 'Muli' => 'Muli', 'News+Cycle' => 'News Cycle', 'Nobile' => 'Nobile', 'Nothing+You+Could+Do' => 'Nothing You Could Do', 'Nunito' => 'Nunito', 'Open+Sans' => 'Open Sans', 'Open+Sans' => 'Open Sans', 'Oswald' => 'Oswald', 'Pacifico' => 'Pacifico', 'Paytone+One' => 'Paytone One', 'Permanent+Marker' => 'Permanent Marker', 'Philosopher' => 'Philosopher', 'Play' => 'Play', 'Pontano+Sans' => 'Pontano Sans', 'PT+Sans' => 'PT Sans', 'PT+Sans+Narrow' => 'PT Sans Narrow', 'PT+Sans+Caption' => 'PT Sans Caption', 'PT+Serif' => 'PT Serif', 'Questrial' => 'Questrial', 'Quicksand' => 'Quicksand', 'Raleway' => 'Raleway', 'Reenie+Beanie' => 'Reenie Beanie', 'Righteous' => 'Righteous', 'Rock+Salt' => 'Rock Salt', 'Rokkitt' => 'Rokkitt', 'Shadows+Into+Light' => 'Shadows Into Light', 'Signika' => 'Signika', 'Source+Sans+Pro' => 'Source Sans Pro', 'Squada+One' => 'Squada One', 'Sunshiney' => 'Sunshiney', 'Syncopate' => 'Syncopate', 'Tangerine' => 'Tangerine', 'The+Girl+Next+Door' => 'The Girl Next Door', 'Ubuntu' => 'Ubuntu', 'Ubuntu+Condensed' => 'Ubuntu Condensed', 'Unkempt' => 'Unkempt', 'Vollkorn' => 'Vollkorn', 'Voltaire' => 'Voltaire', 'Walter+Turncoat' => 'Walter Turncoat', 'Yanone+Kaffeesatz' => 'Yanone Kaffeesatz', );

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:

@font-face {
    font-family: 'proxima_novalight';
    src: url('../fonts/proximanova-light-webfont.eot');
    src: url('../fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-light-webfont.woff') format('woff'),
         url('../fonts/proximanova-light-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-light-webfont.svg#proxima_novalight') format('svg');
    font-weight: normal;
    font-style: normal;
}

On my childtheme template-customizer.php:

global $childfontchoices;
$childfontchoices= array( 'proxima_novalight' => 'ProximaNova Light', 'other_fonts' => 'Other Fonts');

/*
==================================================================
TYPOGRAPHY
==================================================================
*/
add_action('jbst_add_to_customizer','typography_customizer_options');
function typography_customizer_options($wp_customize) {
    global $wp_customize;
    global $childfontchoices;
    $wp_customize->add_section( 'text_settings', array(
        'title'          => 'Typography',
        'priority'       => 135,
        'description'    => __( 'Some basic font choices for your theme.' , 'jamedo-bootstrap-start-theme'),

    ) );

    /* Heading Font Family */
    $wp_customize->add_setting( 'heading_font_family', array(
        'default'        => heading_font_family,
    ) );

    $wp_customize->add_control( 'heading_font_family', array(
        'label'   => 'Headings Font Family:',
        'section' => 'text_settings',
        'type'    => 'select',
        'choices'    => $childfontchoices,
        'priority'       => 10,
    ) );

}// END TYPOGRAPHY SETTINGS

On my functions.php:

/*
==========================================================
ADD DEFAULT
==========================================================
*/
add_action('after_setup_theme','set_defaultoptions');
function set_defaultoptions() {
if(!defined('heading_font_family'))define('heading_font_family','proxima_novalight'); 
}

/*
==========================================================
ADD STYLE ON HEADER
==========================================================
*/
function add_custom_embedded_styles() {  get_template_part('assets/css/custom'); }
add_action( 'wp_head', 'add_custom_embedded_styles', 100 );


On my custom.php
/*
==========================================================
ECHO MY CODE
==========================================================
*/
echo 'h1, h2, h3 {  font-family: '.get_theme_mod( 'heading_font_family', heading_font_family).'; } ';

Note: Im not include the other code that not include on my sample

[bassjobsen]

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&amp;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/.

[bassjobsen]

NOTE c9b4d4d also change the built-in mixin include-custom-font. The mixin is now:

.include-custom-font(@family: arial,@font-path, @path: @custom-font-dir, @weight: normal, @style: normal)

font-path should be set to the name of your font files without extension. In the case of meteocons-webfont.eot the font-path should be set to @font-path: 'meteocons-webfont';. @custom-font-dir will be set to assets/fonts/