roi-theme/inc/customizer-fonts.php

<?php
/**
 * Font Options for Theme Customizer
 *
 * @package ROI_Theme
 * @since 1.0.0
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

/**
 * Register font settings in the Customizer
 */
function roi_customize_register_fonts($wp_customize) {

    // Add Typography Section
    $wp_customize->add_section('roi_typography', array(
        'title'       => __('Typography', 'roi-theme'),
        'description' => __('Configure font settings for your site.', 'roi-theme'),
        'priority'    => 30,
    ));

    // Setting: Use Custom Fonts
    $wp_customize->add_setting('roi_use_custom_fonts', array(
        'default'           => false,
        'sanitize_callback' => 'roi_sanitize_checkbox',
        'transport'         => 'refresh',
    ));

    $wp_customize->add_control('roi_use_custom_fonts', array(
        'label'       => __('Use Custom Fonts', 'roi-theme'),
        'description' => __('Enable custom fonts instead of system fonts. System fonts load faster and improve Core Web Vitals.', 'roi-theme'),
        'section'     => 'roi_typography',
        'type'        => 'checkbox',
    ));

    // Setting: Font Loading Strategy (only if custom fonts enabled)
    $wp_customize->add_setting('roi_font_display', array(
        'default'           => 'swap',
        'sanitize_callback' => 'roi_sanitize_select',
        'transport'         => 'refresh',
    ));

    $wp_customize->add_control('roi_font_display', array(
        'label'       => __('Font Display Strategy', 'roi-theme'),
        'description' => __('Controls how fonts are displayed during loading. "swap" is recommended for best performance.', 'roi-theme'),
        'section'     => 'roi_typography',
        'type'        => 'select',
        'choices'     => array(
            'auto'     => __('Auto', 'roi-theme'),
            'block'    => __('Block', 'roi-theme'),
            'swap'     => __('Swap (Recommended)', 'roi-theme'),
            'fallback' => __('Fallback', 'roi-theme'),
            'optional' => __('Optional', 'roi-theme'),
        ),
        'active_callback' => 'roi_is_custom_fonts_enabled',
    ));

    // Setting: Preload Fonts
    $wp_customize->add_setting('roi_preload_fonts', array(
        'default'           => true,
        'sanitize_callback' => 'roi_sanitize_checkbox',
        'transport'         => 'refresh',
    ));

    $wp_customize->add_control('roi_preload_fonts', array(
        'label'       => __('Preload Font Files', 'roi-theme'),
        'description' => __('Preload critical font files for faster rendering. Recommended for better LCP scores.', 'roi-theme'),
        'section'     => 'roi_typography',
        'type'        => 'checkbox',
        'active_callback' => 'roi_is_custom_fonts_enabled',
    ));
}

add_action('customize_register', 'roi_customize_register_fonts');

/**
 * Check if custom fonts are enabled
 */
function roi_is_custom_fonts_enabled() {
    return get_theme_mod('roi_use_custom_fonts', false);
}

/**
 * Add body class based on font settings
 */
function roi_font_body_class($classes) {
    if (roi_is_custom_fonts_enabled()) {
        $classes[] = 'use-custom-fonts';
    } else {
        $classes[] = 'use-system-fonts';
    }
    return $classes;
}

add_filter('body_class', 'roi_font_body_class');

/**
 * Add preload links for custom fonts
 */
function roi_preload_custom_fonts() {
    // Only preload if custom fonts are enabled and preload is enabled
    if (!roi_is_custom_fonts_enabled()) {
        return;
    }

    if (!get_theme_mod('roi_preload_fonts', true)) {
        return;
    }

    // Example preload links - uncomment and modify when you have custom font files
    /*
    ?>
    <link rel="preload" href="<?php echo esc_url(get_template_directory_uri() . '/assets/fonts/CustomSans-Regular.woff2'); ?>" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="<?php echo esc_url(get_template_directory_uri() . '/assets/fonts/CustomSans-Bold.woff2'); ?>" as="font" type="font/woff2" crossorigin>
    <?php
    */
}

add_action('wp_head', 'roi_preload_custom_fonts', 1);

/**
 * Output inline CSS for font display strategy
 */
function roi_output_font_display_css() {
    if (!roi_is_custom_fonts_enabled()) {
        return;
    }

    $font_display = get_theme_mod('roi_font_display', 'swap');

    // This would be used if you have actual @font-face declarations
    // For now, it's just a placeholder for future implementation
    ?>
    <style id="roi-font-display-strategy">
        /* Font display strategy: <?php echo esc_attr($font_display); ?> */
        /* This would contain dynamic @font-face rules when custom fonts are added */
    </style>
    <?php
}

add_action('wp_head', 'roi_output_font_display_css', 5);