Подключение шрифта в Nuxt
Давайте познакомимся с подключением
шрифта без отдельных модулей Nuxt.
Глобальный main.css уже указан
в nuxt.config.ts в массиве css,
поэтому достаточно дописать правила
в этот файл: они попадут на все
страницы вместе с макетом
и меню из NuxtLink.
Один из простых вариантов - директива
@import в начале main.css
для шрифта с Google Fonts.
Строка @import должна идти
до остальных правил в файле.
После загрузки семейства задаём
font-family для body,
запасное значение sans-serif
подстрахует, если внешний шрифт
не успеет загрузиться. После сохранения
main.css перезапустим npm run dev,
если сервер уже работал, и проверим
вид текста на главной и на другом
адресе из app/pages.
Тот же main.css можно использовать
для классов шапки из default.vue:
базовый шрифт на body наследуют
абзацы и ссылки, а для отдельных
блоков позже зададим своё font-family.
Фрагмент с Roboto:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
margin: 0;
}
Задайте для шапки сайта другой
шрифт, чем для основного текста,
в main.css.
