CSS: Подключение шрифта @font-face
Подключение шрифта может быть достигнуто с использованием правил @font-face
1. Подключение через Google Fonts
Здесь мы используем Google Fonts для загрузки шрифта в формате woff2, который поддерживается большинством браузеров. font-display: swap гарантирует, что текст будет отображаться с использованием запасного шрифта до загрузки шрифта Roboto.
Теперь вы можете использовать шрифт Roboto для текста на вашем сайте, задав его для свойства font-family.
@font-face { font-family: 'Roboto'; src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); font-style: normal; font-weight: 300 700; font-display: swap; } body { font-family: 'Roboto', sans-serif; }
2. Подключение шрифта из локального файла
Если вы хотите подключить шрифт локально, вам необходимо сначала загрузить его файлы на ваш веб-сервер.
Здесь мы используем правило @font-face для определения шрифта семейства Roboto, а затем задаем различные форматы шрифтов с помощью правил src. В данном случае мы используем форматы TTF, WOFF и WOFF2, чтобы обеспечить максимальную совместимость с различными браузерами.
Далее мы применяем шрифт к элементам body, используя значение font-family. Теперь ваш сайт будет использовать шрифт Roboto, загруженный локально с вашего веб-сервера.
@font-face { font-family: 'Roboto'; src: url('путь/к/шрифту/Roboto-Regular.ttf') format('truetype'), url('путь/к/шрифту/Roboto-Regular.woff') format('woff'), url('путь/к/шрифту/Roboto-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; } body { font-family: 'Roboto', sans-serif; }
Комментарии