-
Hi
I’ve been working on making my project fluid typography. I have made a video for you to watch which will explain it better but in short. The clamp() is working great but for some reason it doesn’t work in the bakend when designing the site.
It’ll hopefully make sense once you see the video
thanks
Byron -
Hi there,
Can you share a link to the video ?
-
Hey David,
I just realised I can share a link in Snaggit —haha, makes sense.
https://app.screencast.com/l4rDusQlZMQAk?conversation=VEyIxBkNTbPs4L5YWhhHyZ
I hope this works, it goes to screencast. Website is:
https://holy-antelope-0c58d9.instawp.xyz/
I have also added a temporary login.
Thanks
Byron -
Ok, the most likely issue is that WordPress doesn’t, by default, load the Customizer CSS in the editor.
You have to tell WP to load it.See my reply here:
https://generate.support/topic/image-caption-2/#post-91712
The first snippet is the one you require.
Let me know
-
Hey David,
Thanks fro your reply. I tried that code snippet, but It didn’t work, unfortunately. Any other ideas?
I suppose my big question is: What is the best practice for adding dynamic typography to Generate Press? I’ve gone down a few rabbit holes, as have others who are trying to do the same thing, and it would be nice to have some documentation on ‘the best way’.Thanks for your time.
Byron -
I am very interested in this topic, too. While
clamp()is great, I haven’t figured out yet how to apply it universally. More often than not it takes more time than creating media queries. This is, of course, my lack of knowledge how to use it properly. 🙂 -
How was the snippet added to the site ?
-
Hi David,
If you go into the backend of the website, you will see the snippet in the ‘code snippet’ plugin labelled ‘helping in the backend for fonts’.
This is the code I added:
add_filter( ‘block_editor_settings_all’, function( $editor_settings ) {
$css = wp_get_custom_css_post()->post_content;
$editor_settings[‘styles’][] = array( ‘css’ => $css );return $editor_settings;
} );I still think my big question is being missed. Is this the BEST way to add fluid typography? If not, what is the recommended way when using Generate Press/Blocks? I feel there must be a best practice around this, I am merely hacking what I think makes sense.
Thanks
Byron -
Hi Byron,
There is currently no specific way to implement fluid typography in GeneratePress. However, there are plans to integrate fluid typography and explore global variables, as mentioned here: https://github.com/tomusborne/generatepress/issues/509
For now, the ‘hacky’ way is the best approach if you intend to incorporate fluid typography on your website. 🙂
-
Ok cool thanks.
David did you have any luck with the code you recommended? I feel with this piece I’ll have something pretty good to run with.
-
The code is accurate, however there’s an error in one of your CSS rules within the Additional CSS section, as highlighted in the screenshot below:
https://postimg.cc/LJs7Q5YKReview line 34, you used a colon instead of a semicolon. This mistake causes the editor to fail in loading the styles.
-
Hey Alvind,
Thanks so much for spotting this error! The code worked a treat after that. Thanks David as well for your time. That’s pretty cool, I think I’ve got fluid typography working in a way that is simple and makes sense to me.
Thanks again
Byron -
Awesome, glad to hear that! 🙂
-
I;m sure a short explanatory post on final method would be much appreciated by many.
Sort of silly that it is not an integrated part of GP yet! -
Hi there,
if you want to use Fluid Typography with CSS
clamp()in GP then the simplest way is:1. Create your CSS Clamp properties.
A site like this will help:
https://utopia.fyi/clamp/calculator/An example clamp property will look something like this:
clamp(1rem, 0.3043rem + 3.4783vi, 3rem);2. in Customiser > Typography, edit the element and paste the
clamp()property into the field.This will work on the front end and in the editor.
If you need any further info, raise a new topic and we can assist
- You must be logged in to reply to this topic.