[Resolved] Add Google font with Code Snippets plugin

[Jacob]

This worked perfectly. I used your snippet, Tom, and added the font category and variants.

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David R]

In the code snippet, adding ksort($fonts); on the line before return $fonts; will keep your fonts list in alphabetical order.

ksort($fonts);
return $fonts;

-David R

[geco]

Hello,

I would like to include more than one source in the theme but I do not understand much about php, this code only has one source and I would like to add two:

$ fonts [‘Revolution_Gothic_p’] = array (
‘name’ => ‘Revolution Gothic p’,
‘variants’ => array (‘300’, ‘300i’, ‘400’, ‘400i’, ‘500’, ‘500i’, ‘600’, ‘600i’, ‘700’, ‘700i’),
‘category’ => ‘serif’

Thank you

[Tom]

Hi there,

Have you tried our custom code here?: https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[geco]

Hello Tom,

Yes, I’ve tried it, in fact it’s the same as the one I sent you.

What I need is to add a second source to that code. How do I include 2 sources in that code?
$ fonts [‘font.1, font.2’] = array (

Thank you
Sergio

[Tom]

Ah, like this:

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
    $fonts[ 'david_libre' ] = array( 
        'name' => 'David Libre',
        'variants' => array( '400', '500', '700' ),
        'category' => 'serif'
    );

    $fonts[ 'another_one' ] = array( 
        'name' => 'Another one',
        'variants' => array( '400', '500', '700' ),
        'category' => 'serif'
    );

    return $fonts;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[geco]

Thanks Tom, this is what I was looking for.

One more thing; I have observed that when accessing in a mobile version the selected sources are not shown and are replaced by others. What is the reason?

[Leo]

Your mobile browser might not have that font installed.

I’ve seen it happen a couple times before.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[geco]

solved. It was not displayed because the source was not Google Fonts, I had to host it on my server and it has been fixed.

Thank you

[Leo]

No problem!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts