Turn On Fluid Typography
Makes font sizes from the theme presets scale smoothly between phone and desktop widths, so large headings never overflow on small screens.
Opens WPIDE on
Code
// Screen widths between which sizes scale.
$wpide_fluid_min = '360px';
$wpide_fluid_max = '1280px';
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_fluid_min, $wpide_fluid_max ) {
return $theme_json->update_with( array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'settings' => array(
'typography' => array(
'fluid' => array(
'minViewportWidth' => $wpide_fluid_min,
'maxViewportWidth' => $wpide_fluid_max,
),
),
),
) );
} );Notes
Change the viewport range to control where scaling starts and stops.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.