There are many fonts in the customizer options if you are using the GeneratePress theme. But most of the fonts don't fall for premium category font. If you have a premium font that you want to use in your theme, then you can easily do that. So in order to use Adobe Fonts in your GeneratePress theme, follow this tutorial step by step.
Plugins Required to Enable Adobe Fonts in GeneratePress:
- Code Snippets
- GP Premium
Steps to Enable Adobe Fonts (Typekit) in GeneratePress Theme
- Make sure you've installed the required plugins as mentioned above
- Go to your Adobe Fonts Website and Navigate to the My fonts page.
- Navigate to Web Projects, and copy the Typekit CSS of your project (if you don't have a project, create a new web project instead first)
- Now go to Appearance > Elements > Add New Element
- Name it something, paste the Typekit CSS in Code Section, choose hook as wp_head, set location display rule for entire site, and save the element.
- Go to Snippets and Add a new snippet
- Name your snippet something and paste the below PHP code
add_filter( 'generate_typography_default_fonts', 'tu_add_typekit_fonts' );
function tu_add_typekit_fonts( $fonts ){
$fonts[ ] = 'proxima-nova';
return $fonts;
};- Replace the ‘proxima-nova' font name with the original name of the font that you want to use and that exists in your Adobe font web project.
- Now Go to Appearance > Customize > Typography, and you can find your Adobe font in the fonts dropdown for Body, Primay Nav, Footer, Buttons and all that.
- Change the font and update
Congratulations!! You've successfully updated the Adobe fonts in your GeneratePress theme.
If the fonts don't reflect, make sure to do this process after clearing your cache or disabling the cache. Once the fonts are reflected perfectly, you can enable the cache plugin again.