Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Clamping down on clamps

  • 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/LJs7Q5YK

    Review 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! πŸ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.