Archived topic
NEW GP and GPP bug with Dynamic Font.
11 replies · Started by FunkyCss on October 15, 2021
Hello,
I am working in a staging website with the new releases of GP GPP and GB pro.
What I have noticed is that if you use custom font ( Upload on the child theme - folder fonts ) is working for you ( because you have also the font locally. )
But the dynamic font ( Custom Font ) is not working if the user that is visiting your website it does not have it locally.
Maybe I have not set up this right and there is other way of doing it ?
Hi there,
you still need to create the @font-face CSS for your local font - i am not seeing this on your site ?
Hi David, I have not actually , I thought this works out of the box now.
So If I use a Child Theme, I upload that to my Generatepress_child theme folder with the name ( fonts )
And I create a @font-face CSS for that.
After I choose in the Dynamic Typograpphy my font ?
Thats correct.
The latest Typography simply outputs the font-family CSS for that chosen element eg.
.the-chosen-element {
font-family: 'your custom font';
}
You still need the @font-face CSS in your child theme to make the font request.
In the future we will be adding a Local Font option to GPP typography, which will allow you to upload a font - and automatically create the @font-face for you ( no need for child theme ).
Hello David,
I tried this but the fonts are not showing in the customizer.
1. I have created a path with the child theme in a fonts folder.
2. Created a @font face in style.css
/* PF FUTURA REGULAR 400 - latin */
@font-face {
font-family: "Pf Futura Neu";
font-style: normal;
font-weight: 400;
src: url("../wp-content/themes/generatepress_child/fonts/PFFuturaNeuBookObl-Regular.otf"); /* IE9 Compat Modes */
}
When I check in the customizer is not there.
In the field provided just type in the name eg. Pf Futura Neu
And DON'T check the Google Font option.
Yes this works.. thank you
Notice tho that it does not show anymore in the dashboard the font , any idea how to make it work in the wp editing post also ?
For any custom styles to display in the editor you will need to enqueue those styles:
add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_style( 'your-handle', 'URL TO YOUR FILE' );
} );
You can just reference your child theme stylesheet
Hi David,
This seems not to work for me unfortunately.
Maybe the 'your-hadle' is something I have to insert ?
Is any other way to use another font for dashboard as now it looks broken.
The your-handle should just be a unique name for the script. eg. db-editor-styles in this case db is my initials.
However that style will only load in the block editor.
Are you trying to change the Admin UI ?
Hello David, no I only needed to change the Block Editor.
Just saw this thread - >https://generatepress.com/forums/topic/cutom-fonts-and-gutenberg/
And managed to fix the issue there.
So I would say thanks again for a million time!
haha
Andreas
Glad to hear that!