Получить профессию в Skypro
Смена стандартного шрифта Bootstrap на Google font Oswald
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Чтобы изменить стандартный шрифт Bootstrap на выбранный вами шрифт из библиотеки Google Fonts, следует добавить ссылку на этот шрифт в HTML-код и переопределить стили шрифта в CSS:
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">body {
font-family: 'Oswald', sans-serif !important; // "Oswald" заменяет дефолтный шрифт Bootstrap
}Замените 'Oswald' на имя шрифта, который вы выбрали из Google Fonts. Использование !important гарантирует применение нового шрифта вместо стандартного.
Если вы планируете использовать различные варианты начертания шрифта, укажите их в параметрах ссылки в теге <link> или через директиву @import.
Подробное погружение
Кастомизация внешнего вида через Sass
Sass — это мощный инструмент для оптимизации работы с CSS. C его помощью можно с легкостью переопределить переменные Bootstrap:
$body-font-family: 'Oswald', sans-serif; // "Oswald" готов к использованию
@import "bootstrap"; // Затем подключаем BootstrapДля тонкой настройки стилей Bootstrap через Sass рекомендуется работать с файлом _variables.scss, а затем собирать стили при помощи компилятора, например gulp-sass.
Упорядочивание CSS-файлов
Порядок и организованность – ключ к успешной работе. Для хранения своих стилей используйте отдельные файлы custom.css или custom.scss:
1. `_variables.scss`: позволяет переопределять переменные Bootstrap
2. `custom.scss`: здесь задаются параметры для применения 'Oswald'
3. `_custom_compiled.css`: конечный результат компиляции Sass, подключается после стилей BootstrapПодключение файла _custom_compiled.css рекомендуется выполнить в секции <head> HTML документа, сразу после подключения стандартных стилей Bootstrap.
Взаимодействие с CSS-переменными в Bootstrap 5
C появлением пятой версии Bootstrap сталь доступны CSS variables, облегчающие настройку тем. Ниже приведен пример установки шрифта 'Oswald' в качестве основного:
:root {
--bs-body-font-family: 'Oswald', sans-serif; // Oswald теперь определён как CSS-переменная
}В официальной документации Bootstrap вы найдете полную информацию об использовании CSS-переменных.
Советы по оптимизации и использованию @import
<link> против @import
Для подключения шрифтов из Google Fonts предпочтителен тег <link>, позволяющий загружать шрифты параллельно и быстрее:
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">Однако, если вам удобнее объединить все CSS или Sass файлы вместе, используйте @import:
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap'); // Вели Oswald обновить ваши стили!Эффективная загрузка шрифтов
При выборе шрифта и его начертаний воспользуйтесь стратегиями font-display и запрашивайте только те варианты начертания, которые вам действительно нужны, чтобы не утяжелять сайт ненужными ресурсами:
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap&font-display=swap" rel="stylesheet"> // Oswald, действуй в строгом соответствии с накатанным шаблоном!Визуализация
Смена дефолтного шрифта Bootstrap можно сравнить с обновлением гардероба:
До 🤵 👔
После 🤵 👚Другой шрифт из коллекции Google Fonts применяется так:
body {
font-family: 'Название шрифта из Google Fonts', sans-serif; // Прощай старое,добро пожаловать в новый мир стиля!
}Полезные материалы
- Библиотека шрифтов Google Fonts — выбирайте и комбинируйте любые шрифты.
- Справочник по использованию Sass в Bootstrap версии 5.0 — как работать с переменными Sass в Bootstrap.
- Документация по директиве @import в CSS — разъяснение W3Schools по использованию директивы @import в CSS.
- Использование @font-face в CSS — подсказки CSS-Tricks по загрузке шрифтов с помощью @font-face.
- Полное руководство по оптимизации загрузки шрифтов — как повысить эффективность работы с веб-шрифтами.
- Основы Sass — уроки Sass и его использования с Bootstrap для создания стильного веб-дизайна.
- Оптимизация времени загрузки веб-страниц — рекомендации Google Fonts по ускорению загрузки веб-шрифтов.