Flector

Как подключить шрифты от Google вроде Open Sans и Roboto?

Использование шрифтов от Google

При выборе шрифтов на сайте Google Fonts вам будет предложено использовать для подключения выбранного шрифта код вида <link rel="stylesheet" href="" >. Но в WordPress подключение шрифтов таким образом является неправильным. Разработчики движка рекомендуют использовать специальные функции для регистрации и подключения css-стилей, поэтому именно ими вам и стоит воспользоваться. Покажу на примере подключения двух гугловских шрифтов - Open Sans и Roboto. Добавьте в файл functions.php вашей темы следующий код:

//подключение шрифтов Open Sans и Roboto от Google start
function wph_add_google_fonts() {
    if ( !is_admin() ) {
        wp_register_style('google-open-sans', 'https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=cyrillic', array(), null, 'all');
        wp_register_style('google-roboto', 'https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=cyrillic', array(), null, 'all');
        wp_enqueue_style('google-open-sans');
        wp_enqueue_style('google-roboto');
    }
}
add_action('wp_enqueue_scripts', 'wph_add_google_fonts');
//подключение шрифтов Open Sans и Roboto от Google end

Не так сложно, не правда ли?

Как использовать эти шрифты для отдельных кусков текста в записи? Очень просто:

<span style="font-family: 'Open Sans';">В данной строчке текста используется шрифт <strong>Open Sans</strong>.</span>
<span style="font-family: 'Roboto';">В данной строчке текста используется шрифт <strong>Roboto</strong>.</span>
<span style="font-family: Times New Roman;">В данной строчке текста используется шрифт <strong>Times New Roman</strong>.</span>

Но лучше, конечно, сразу прописать используемый шрифт для всех тегов параграфа в файле style.css вашей темы, чтобы не указывать используемый шрифт прямо в контенте записей (я это сделал только для примера).


Написать комментарий

Для вставки кода воспользуйтесь кнопкой "Код". Используйте предпросмотр!