.elementor-kit-825{--e-global-color-primary:#C4C4C4;--e-global-color-secondary:#54595F;--e-global-color-text:#333333;--e-global-color-accent:#69727D;--e-global-color-9cec543:#CF2020;--e-global-color-98fa986:#333333;--e-global-color-f63786a:#69727D;--e-global-color-1c715cb:#C4C4C4;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-size:22px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-font-style:italic;--e-global-typography-text-font-family:"Arial";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#FFFFFF;color:#000000;font-size:16px;font-weight:500;}.elementor-kit-825 e-page-transition{background-color:#FFBC7D;}.elementor-kit-825 h2{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );font-style:var( --e-global-typography-secondary-font-style );}.elementor-kit-825 h5{font-style:italic;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:10px;--container-default-padding-right:10px;--container-default-padding-bottom:10px;--container-default-padding-left:10px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-825 h2{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-825 h2{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --black:#000000; --white:#FFFFFF; --grey-light:#FAFAFA; --grey-mid:#EEEEEE; --xxxlarge:clamp(2.63rem, 2.30172rem + 1.37931vw, 3.25rem); --xxlarge:clamp(2.25rem, 1.99138rem + 1.10345vw, 2.75rem); --xlarge:clamp(1.88rem, 1.68103rem + 0.82759vw, 2.25rem); --large:clamp(1.50rem, 1.37069rem + 0.55172vw, 1.75rem); --medium:clamp(1.13rem, 1.06034rem + 0.27586vw, 1.25rem); --normal:1rem; --small:clamp(0.94rem, 0.93750rem + 0.00000vw, 0.94rem); --xsmall:clamp(0.88rem, 0.87500rem + 0.00000vw, 0.88rem); --primary:#000000; --secondary:#000000; --accent:#000000; --text:#1E1E1E; --grey-dark:#AAAAAA; } /* Start custom CSS *//** * Font Clamp Calculator 4 */ /* Plugin Name: Font Clamp Calculator Description: Adds a Font Clamp Calculator to the WordPress admin dashboard with Class, Tag, and Scale tabs for generating responsive font sizes with persistent data. Includes options to use custom WOFF2 fonts for previews. Version: 4 */ // Prevent direct access to the file if (!defined('ABSPATH')) { exit; } // Add menu item to the WordPress admin dashboard function font_clamp_calculator_menu() { add_menu_page( 'Font Clamp Calculator', 'Font Clamp', 'manage_options', 'font-clamp-calculator', 'font_clamp_calculator_page', 'dashicons-editor-textcolor', 80 ); } add_action('admin_menu', 'font_clamp_calculator_menu'); // Callback function to render the Font Clamp Calculator page function font_clamp_calculator_page() { // Load saved settings $settings = get_option('font_clamp_settings', [ 'rootSize' => 16, 'minViewport' => 375, 'maxViewport' => 1100, 'unitType' => 'px', 'selectedClassSizeId' => 6, 'selectedTagSizeId' => 1, 'selectedScaleSizeId' => 7, 'activeTab' => 'class', 'scalePMinFont' => 16, 'scalePMaxFont' => 16, 'scaleRatioMin' => 1.333, 'scaleRatioMax' => 1.4, 'scalePLineHeight' => 1.4, 'previewFontUrl' => '', 'previewFontUrlP' => '' ]); ?>

Font Clamp Calculator V4

Settings

Font Size Classes

Class Name Min Size Max Size Line Height

Preview

Selected Class CSS


                    

                


                

                    

                        
Generated CSS (All Classes)

                        
                    

                    

                        

                    

                

            

        


        

        
        
    

     1, 'className' => 'xxxlarge', 'min' => 42, 'max' => 52, 'lineHeight' => 1.3],
            ['id' => 2, 'className' => 'xxlarge', 'min' => 36, 'max' => 44, 'lineHeight' => 1.3],
            ['id' => 3, 'className' => 'xlarge', 'min' => 30, 'max' => 36, 'lineHeight' => 1.3],
            ['id' => 4, 'className' => 'large', 'min' => 24, 'max' => 28, 'lineHeight' => 1.3],
            ['id' => 5, 'className' => 'medium', 'min' => 18, 'max' => 20, 'lineHeight' => 1.3],
            ['id' => 6, 'className' => 'normal', 'min' => 16, 'max' => 16, 'lineHeight' => 1.3],
            ['id' => 7, 'className' => 'small', 'min' => 15, 'max' => 15, 'lineHeight' => 1.3],
            ['id' => 8, 'className' => 'xsmall', 'min' => 14, 'max' => 14, 'lineHeight' => 1.3]
        ]);
        update_option('font_clamp_settings', array_merge(get_option('font_clamp_settings', []), [
            'selectedClassSizeId' => 6,
            'previewFontUrl' => '',
            'previewFontUrlP' => ''
        ]));
    } else if ($tab === 'tag') {
        update_option('font_clamp_tag_sizes', [
            ['id' => 1, 'tagName' => 'h1', 'min' => 36, 'max' => 48, 'lineHeight' => 1.4],
            ['id' => 2, 'tagName' => 'h2', 'min' => 30, 'max' => 40, 'lineHeight' => 1.4],
            ['id' => 3, 'tagName' => 'h3', 'min' => 24, 'max' => 32, 'lineHeight' => 1.4],
            ['id' => 4, 'tagName' => 'h4', 'min' => 20, 'max' => 28, 'lineHeight' => 1.4],
            ['id' => 5, 'tagName' => 'h5', 'min' => 18, 'max' => 24, 'lineHeight' => 1.4],
            ['id' => 6, 'tagName' => 'h6', 'min' => 16, 'max' => 20, 'lineHeight' => 1.4],
            ['id' => 7, 'tagName' => 'p', 'min' => 14, 'max' => 18, 'lineHeight' => 1.4]
        ]);
        update_option('font_clamp_settings', array_merge(get_option('font_clamp_settings', []), [
            'selectedTagSizeId' => 1,
            'previewFontUrl' => '',
            'previewFontUrlP' => ''
        ]));
    } else if ($tab === 'scale') {
        update_option('font_clamp_settings', array_merge(get_option('font_clamp_settings', []), [
            'scalePMinFont' => 16,
            'scalePMaxFont' => 16,
            'scaleRatioMin' => 1.333,
            'scaleRatioMax' => 1.4,
            'scalePLineHeight' => 1.4,
            'selectedScaleSizeId' => 7,
            'previewFontUrl' => '',
            'previewFontUrlP' => ''
        ]));
    }
    wp_send_json_success();
}
add_action('wp_ajax_reset_font_clamp_defaults', 'reset_font_clamp_defaults');

function save_font_clamp_settings() {
    check_ajax_referer('font_clamp_nonce', 'nonce');
    if (isset($_POST['settings'])) {
        $settings = json_decode(stripslashes($_POST['settings']), true);
        if (json_last_error() === JSON_ERROR_NONE) {
            update_option('font_clamp_settings', $settings);
            wp_send_json_success();
        } else {
            wp_send_json_error('Invalid JSON data');
        }
    } else {
        wp_send_json_error('No settings provided');
    }
}
add_action('wp_ajax_save_font_clamp_settings', 'save_font_clamp_settings');

function font_clamp_push_to_customizer() {
    check_ajax_referer('font_clamp_nonce', 'nonce');
    if (!current_user_can('edit_theme_options')) {
        wp_send_json_error('Permission denied');
    }
    $new_css = stripslashes($_POST['css'] ?? '');
    $existing_css = wp_get_custom_css();
    $final_css = $existing_css . "\n\n/* Font Clamp Calculator Output */\n" . $new_css;
    $result = wp_update_custom_css_post($final_css);
    if ($result instanceof WP_Post) {
        wp_send_json_success();
    } else {
        wp_send_json_error('Failed to update customizer CSS');
    }
}
add_action('wp_ajax_font_clamp_push_to_customizer', 'font_clamp_push_to_customizer');

function font_clamp_calculator_enqueue_assets() {
    if (isset($_GET['page']) && $_GET['page'] === 'font-clamp-calculator') {
        wp_enqueue_style('font-clamp-tailwind', 'https://cdn.tailwindcss.com', [], null);
    }
}
add_action('admin_enqueue_scripts', 'font_clamp_calculator_enqueue_assets');

add_shortcode('font_clamp_calculator', 'render_font_clamp_calculator_shortcode');

function render_font_clamp_calculator_shortcode() {
    ob_start();
    $settings = get_option('font_clamp_settings', [
        'rootSize' => 16,
        'minViewport' => 375,
        'maxViewport' => 1100,
        'unitType' => 'px',
        'selectedClassSizeId' => 6,
        'selectedTagSizeId' => 1,
        'selectedScaleSizeId' => 7,
        'scalePMinFont' => 16,
        'scalePMaxFont' => 16,
        'scaleRatioMin' => 1.333,
        'scaleRatioMax' => 1.4,
        'scalePLineHeight' => 1.4,
        'previewFontUrl' => '',
        'previewFontUrlP' => '',
        'activeTab' => 'class'
    ]);
    font_clamp_calculator_page();
    return ob_get_clean();
}

add_action('wp_enqueue_scripts', 'enqueue_font_clamp_tailwind_frontend');
function enqueue_font_clamp_tailwind_frontend() {
    if (is_singular()) {
        global $post;
        if (has_shortcode($post->post_content, 'font_clamp_calculator')) {
            wp_enqueue_script('font-clamp-tailwind', 'https://cdn.tailwindcss.com', [], null, true);
        }
    }
}/* End custom CSS */