Google fonts?

[truetesterphp]

Hi
i see there Class(class Kirki_Fonts) created for Google font but define any way how to use it.i am using this plguin in theme , if you provide any way or idea how to add Google fonts it would be grate .

Thanks

[aristath]

Hey there!

You can add a dropdown containing all the google fonts like this:

$controls[] = array(
    'type'     => 'select',
    'setting'  => 'font_menus_font_family',
    'label'    => __( 'Menus font', 'maera_bs' ),
    'section'  => 'typo_nav',
    'default'  => '"Helvetica Neue", Helvetica, Arial, sans-serif',
    'priority' => 40,
    'choices'  => Kirki_Fonts::get_font_choices(),
);

[aristath]

You can also include the subsets...

$controls[] = array(
    'type'     => 'select',
    'setting'  => 'font_base_family',
    'label'    => __( 'Base font', 'maera_bs' ),
    'section'  => 'typo_base',
    'default'  => '"Helvetica Neue", Helvetica, Arial, sans-serif',
    'priority' => 20,
    'choices'  => Kirki_Fonts::get_font_choices(),
);
$controls[] = array(
    'type'     => 'multicheck',
    'setting'  => 'font_subsets',
    'label'    => __( 'Google-Font subsets', 'maera_bs' ),
    'description' => __( 'The subsets used from Google\'s API.', 'maera_bs' ),
    'section'  => 'typo_base',
    'default'  => 'latin',
    'priority' => 22,
    'choices'  => Kirki_Fonts::get_google_font_subsets(),
);

[truetesterphp]

Hi
we use this code and add Font Drop-down in Theme customizer But we select Font from dropdown google font Not attach in header.

[aristath]

The above code will simply save the font you have selected in the database.
It's then up to you to retrieve that using the get_theme_mod function from WordPress and then format and output it wherever and however you want.

[truetesterphp]

ok i got your point, i am asking above question because some Framework support auto Google font attachment in wp header after choosing Font from Dropdown , this feature available in titan framework.
Thanks For Reply

[ghost]

Hi @aristath I found this Issue thread for google fonts, so posting my the issue here.

Scenario:

1. I am able to get the Font Listing in the WP customiser
2. I am able to get the font family etc from the database and I am using it in my css.
   3.Problem is the Font itself is not getting imported on the page.

I have tried using get_theme_mod as you mentioned above.

here is the code:

function tcx_customizer_css() { 
?>
    <style type="text/css">

        body{ font-family:<?php echo get_theme_mod( 'font_base_family' ); ?>;
            font-weight:<?php echo get_theme_mod( 'font_base_weight' ); ?>; 
            font-size :<?php echo get_theme_mod( 'font_base_size' ); ?>px; }
    </style>
<?php
}

add_action( 'wp_head', 'tcx_customizer_css' );

Please help me on this.

Thanks

[aristath]

Hello again!

I've been building this for the past 2 days... I believe it's working now.
If you're using the master branch from github and not the wordpress.org version (I still haven't updated it, I have to run some more test) you can define your fields like this:

$controls[] = array(
    'type'     => 'select',
    'setting'  => 'body_font_family',
    'label'    => __( 'Main font', 'textdomain' ),
    'section'  => 'typography',
    'default'  => '"Helvetica Neue", Helvetica, Arial, sans-serif',
    'priority' => 40,
    'choices'  => Kirki_Fonts::get_font_choices(),
    'output'   => array(
        'element'  => 'body',
        'property' => 'font-family'
    )
);

This will generate automatically all necessary CSS and output it to the head, and additionally also add the required <link> to the head of your page so that google fonts play.

You don't even need your custom CSS function as posted above... 😄

Can you please test that and let me know if it works for you?

[ghost]

Thanks @aristath its work fine.

[aristath]

Awesome! I'm closing this issue.