Как добавить шрифты Google, если мы используем их напрямую в style.css

Вопрос или проблема

/**
 * Подключение скриптов и стилей
 *
 * @since Cazuela 1.0
 */
function thsp_theme_scripts() {
    /*
     * Подключение шрифтов Google
     *
     * Проверяем, нужно ли загружать шрифты, установленные в параметрах темы
     * Google скрипты
     */
    $theme_options = thsp_cbp_get_options_values();
    $theme_options_fields = thsp_cbp_get_fields();
    $body_font_value = $theme_options['body_font'];
    $heading_font_value = $theme_options['heading_font'];
    $body_font_options = $theme_options_fields['thsp_typography_section']['fields']['body_font']['control_args']['choices'];
    $heading_font_options = $theme_options_fields['thsp_typography_section']['fields']['heading_font']['control_args']['choices'];

    // Проверяем, является ли это шрифтом Google
    if( isset( $body_font_options[$body_font_value]['google_font'] ) ) {
        wp_enqueue_style(
            'font_' . $body_font_value,
            'http://fonts.googleapis.com/css?family=' . $body_font_options[$body_font_value]['google_font']
        );
    }   
    // Проверяем, является ли это шрифтом Google
    if( isset( $heading_font_options[$heading_font_value]['google_font'] ) ) {
        wp_enqueue_style(
            'font_' . $heading_font_value,
            'http://fonts.googleapis.com/css?family=' . $heading_font_options[$heading_font_value]['google_font']
        );
    }
    wp_enqueue_style( 'style', get_stylesheet_uri() );

function register_google_fonts() {

  wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300');
  wp_enqueue_style( 'googleFonts');

}
add_action( 'wp_enqueue_scripts', 'register_google_fonts' );

.cssClass {

    font-family: 'Open Sans', sans-serif;

}

 

Ответ или решение

Для правильной загрузки шрифтов Google в вашей теме WordPress через файл functions.php и их использования в style.css, мы рассмотрим пошаговый процесс, основываясь на предоставленных вами подробностях.

Шаг 1: Добавление шрифтов Google через functions.php

Вам необходимо зарегистрировать и подключить шрифты Google в вашем файле functions.php. Это достигается с помощью функции wp_enqueue_style, которая гарантирует правильный порядок загрузки и предотвращает возможные конфликты с другими стилями.

Вот как можно изменить ваш текущий код в functions.php, чтобы включить шрифты Bitter и Lora:

/**
 * Регистрация и подключение шрифтов Google
 *
 * @since Cazuela 1.0
 */
function thsp_theme_scripts() {
    // Получение опций темы
    $theme_options = thsp_cbp_get_options_values();
    $theme_options_fields = thsp_cbp_get_fields();
    $body_font_value = $theme_options['body_font'];
    $heading_font_value = $theme_options['heading_font'];

    // Проверка, является ли выбранный шрифт шрифтом Google
    if ($body_font_value === 'bitter' || $body_font_value === 'lora') {
        wp_enqueue_style(
            'font_body',
            'https://fonts.googleapis.com/css?family=Bitter|Lora'
        );
    }

    // Проверка также для заголовков
    if ($heading_font_value === 'bitter' || $heading_font_value === 'lora') {
        wp_enqueue_style(
            'font_heading',
            'https://fonts.googleapis.com/css?family=Bitter|Lora'
        );
    }

    // Подключение основного стиля темы
    wp_enqueue_style('style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'thsp_theme_scripts');

Шаг 2: Использование шрифтов в style.css

После того как вы зарегистрировали и подключили шрифты, вам необходимо использовать их в вашем CSS-файле. Например:

.cssClass {
    font-family: 'Bitter', sans-serif; /* Брать шрифт Bitter как основной */
}

.otherClass {
    font-family: 'Lora', serif; /* Брать шрифт Lora для другого класса */
}

Шаг 3: Учитывайте подмены шрифтов

Важно понимать, что в CSS вы должны указывать резервные шрифты (например, sans-serif или serif), чтобы обеспечить корректное отображение текста, если по каким-либо причинам шрифт Google не загрузится.

Рекомендации по безопасности и производительности

1. Используйте HTTPS: Убедитесь в использовании протокола HTTPS для подключения шрифтов, это повысит безопасность вашего ресурса.
2. Минификация шрифтов: Рассмотрите возможность использования минимизированных стилей для улучшения времени загрузки страниц и производительности сайта.
3. Локальная загрузка: Если это целесообразно, вы можете скачать .woff2 версии шрифтов и подключить их локально. Это улучшит время загрузки вашего сайта, так как уменьшит количество внешних запросов.

Заключение

Добавление шрифтов Google в вашу тему WordPress через functions.php крайне важно для правильного отображения контента на сайте. Следуя инструкциям выше, вы сможете не только подключить нужные вам шрифты, но и гарантировать, что они будут правильно применяться к различным элементам вашей темы.

Если вам потребуются дополнительные советы или помощь в других аспектах разработки тем WordPress, не стесняйтесь обращаться!