Получить профессию в 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 по ускорению загрузки веб-шрифтов.