Метод 1: стеки шрифтов CSS
Один из самых простых способов использования встроенных шрифтов — создание стека шрифтов CSS. Стек шрифтов — это список семейств шрифтов в порядке убывания предпочтения. Включив общие семейства шрифтов, такие как «без засечек» или «засечки», в качестве резервных, вы можете использовать встроенный шрифт пользователя, обеспечивая при этом единообразный вид, даже если предпочтительный шрифт недоступен. Вот пример стека шрифтов:

body {
    font-family: 'Times New Roman', Times, serif;
}

Метод 2: свойство CSS системного пользовательского интерфейса
Значение system-uiдля свойства CSS font-familyпозволяет использовать шрифт пользовательского интерфейса операционной системы по умолчанию. Это гарантирует, что ваш веб-сайт будет органично сочетаться с исходным внешним видом. Вот пример:

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
}

Метод 3: библиотеки JavaScript для обнаружения шрифтов.
Чтобы продвинуться дальше в настройке, вы можете использовать библиотеки JavaScript, такие как «FontFaceObserver» или «FontLoader», чтобы определить, доступен ли определенный шрифт на устройстве пользователя. Если шрифт присутствует, вы можете динамически загружать и применять его к своей веб-странице. Вот пример использования FontFaceObserver:

const font = new FontFaceObserver('Lato');
font.load().then(() => {
    document.body.style.fontFamily = 'Lato, sans-serif';
}).catch((error) => {
    console.log('Font failed to load:', error);
});

Метод 4: @font-face с локальными файлами шрифтов
Другой метод — использовать правило @font-faceв CSS для встраивания файла шрифта непосредственно на вашу веб-страницу. Предоставляя как локальный файл шрифта, так и резервный шрифт, вы можете гарантировать, что встроенный шрифт пользователя будет использоваться, когда он доступен. Вот пример:

@font-face {
    font-family: 'CustomFont';
    src: local('Arial'), local('Helvetica'), url('customfont.woff2') format('woff2');
}
body {
    font-family: 'CustomFont', sans-serif;
}

Изучая упомянутые выше методы, вы сможете использовать встроенные шрифты, доступные на устройствах пользователей, и создавать визуально привлекательные веб-сайты с единообразным внешним видом. Используя стеки шрифтов CSS, свойство system-ui, библиотеки определения шрифтов или встраивая локальные файлы шрифтов через @font-face, вы можете улучшить взаимодействие с пользователем, не полагаясь на внешние библиотеки шрифтов. Помните, что соблюдение баланса между эстетикой и производительностью — ключ к созданию восхитительного веб-сайта.