- This topic has 25 replies, 6 voices, and was last updated 3 years, 4 months ago by
Leo.
-
AuthorPosts
-
June 22, 2017 at 11:36 am #337510
Melanie Jongsma
I know there are other topics about customizing the Google font list, but after reading through all of those, I feel like I’ve gone around in circles and I’m still not clear on how to add my font.
I added the Code Snippets plugin, and I’ve created a snippet called Add Google Font. My problem is, I’m not sure which code I need to copy and paste into the Code area! Is it a PHP code? A CSS code? The Embed code that Google provides? I’m not sure.
The Google font I want to add is Reenie Beanie. The Embed code I get from Google is:
<link href=”https://fonts.googleapis.com/css?family=Reenie+Beanie” rel=”stylesheet”>With this information, could someone tell me how to use the Code Snippets plugin to add Reenie Beanie to GP’s font list?
Thank you!
GeneratePress 1.3.48June 22, 2017 at 11:45 am #337519Leo
StaffCustomer SupportHi there,
Copy and paste this code in Code Snippet:
add_filter( 'generate_typography_customize_list','tu_add_google_fonts' ); function tu_add_google_fonts( $fonts ) { $fonts[ 'reenie_beanie' ] = array( 'name' => 'Reenie Beanie' ); return $fonts; }
Then click Save Changes and Activate then you should be good to go!
The newly added font will show up at the bottom of the list in the customizer.
Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 22, 2017 at 12:42 pm #337567Melanie Jongsma
Perfect! Thank you!
June 22, 2017 at 12:42 pm #337569Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 12, 2017 at 5:16 pm #384279Melanie Jongsma
I’m back! I want to add some other Google fonts to a GP website, but I’m not exactly sure how to adapt the code you gave me above. For example, I want to add the entire Zilla Slab family, and Google gives me this code:
<link href=”https://fonts.googleapis.com/css?family=Zilla+Slab” rel=”stylesheet”>Or this CSS:
font-family: ‘Zilla Slab’, serif;Can I use the code above to add a whole font family?
September 12, 2017 at 8:27 pm #384325Leo
StaffCustomer SupportYup the code above should still work.
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 12, 2017 at 8:38 pm #384327Melanie Jongsma
I found this code from someone, and it worked:
add_filter( ‘generate_typography_customize_list’,’tu_add_google_fonts’ );
function tu_add_google_fonts( $fonts ) {
$fonts[ ‘zilla_slab’ ] = array(
‘name’ => ‘Zilla Slab’,
‘variants’ => array( ‘300’, ‘300i’, ‘400’, ‘400i’, ‘500’, ‘500i’, ‘600’, ‘600i’, ‘700’, ‘700i’ ),
‘category’ => ‘serif’
);return $fonts;
}September 12, 2017 at 9:43 pm #384352Leo
StaffCustomer SupportAwesome!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 23, 2017 at 10:27 am #390623Jacob
This does not work for me. I am trying to add Saira Semi Condensed (https://fonts.google.com/specimen/Saira+Semi+Condensed) and neither of the above snippets work. Any troubleshooting tips?
September 23, 2017 at 10:33 am #390624Leo
StaffCustomer SupportCan you show me the code you are using?
The new font added will show up at the bottom of the list in case you missed it.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 23, 2017 at 10:47 am #390629Jacob
add_filter( 'generate_typography_customize_list','tu_add_google_fonts' ); function tu_add_google_fonts( $fonts ) { $fonts[ 'saira_semi_condensed' ] = array( 'name' => 'Saira Semi Condensed' ); return $fonts; }
September 23, 2017 at 12:27 pm #390651Leo
StaffCustomer SupportThe exact code worked for me, at the bottom of the list.
Can you make sure the snippet is activated?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 23, 2017 at 2:02 pm #390690Jacob
Yes, the snippet is activated. I think I did everything right… Here are some relevant screenshots.
https://ibb.co/h02RR5
https://ibb.co/kCAD65
https://ibb.co/b0nhzQSeptember 23, 2017 at 2:29 pm #390696Leo
StaffCustomer SupportThat is very strange. I copied and paste your code and it worked.
Can you try clearing all caching you may have?
If that still doesn’t work can you send me the admin access through Account Issue? https://generatepress.com/contact/
Thanks!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 23, 2017 at 10:46 pm #390839Tom
Lead DeveloperLead DeveloperCan you manually check the very bottom of the font list, in case the search isn’t picking it up?
If that’s not working, it may be because your plugin is firing before GPP, so the filter doesn’t exist yet.
If that’s the case, this would fix it:
add_action( 'after_setup_theme', 'tu_add_to_font_list' ); function tu_add_to_font_list() { add_filter( 'generate_typography_customize_list','tu_add_google_fonts' ); } function tu_add_google_fonts( $fonts ) { $fonts[ 'saira_semi_condensed' ] = array( 'name' => 'Saira Semi Condensed' ); return $fonts; }
You’ll also want to add the font category and variants to your function: 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 -
AuthorPosts
- You must be logged in to reply to this topic.