Изменить шрифт по умолчанию в vuetify

Ответ 1

Самый простой способ - просто установить семейство шрифтов на body. Если вы используете webpack и импортируете запись стилуса Vuetify, main.styl, вы можете просто перезаписать переменную $font-family любым шрифтом, который вы хотите.

Ответ 2

Я заметил, что, по крайней мере, в последних версиях Vuetify вам нужно указать и $body-font-family и $heading-font-family чтобы изменить шрифты всего, от Roboto, до чего-то другого в ваших переопределениях (следуя этим инструкциям), Переопределение $headings, кажется необходимым, так как она определена в _variables.styl и зависит от $heading-font-family. Обратите внимание, что Vuetify перейдет на SCSS в 2.0, поэтому в этот момент будет новый процесс.

$body-font-family = 'Barlow Condensed', sans-serif
$heading-font-family = 'Barlow Condensed', sans-serif
$headings = {
  h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
  h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
  h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
  h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
  h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
  h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
  subheading: { size: 16px, weight: 400 },
  body-2: { size: 14px, weight: 500 },
  body-1: { size: 14px, weight: 400 },
  caption: { size: 12px, weight: 400 },
  button: { size: 14px, weight: 500 }
}

Ответ 3

Я не могу гарантировать, что это "лучшая практика". Но, учитывая, что нет документации о том, как это сделать должным образом, я расскажу вам, как я это сделал.

Я использую шаблон веб-пакета Nuxt, поэтому моя файловая структура может немного отличаться от вашей, но концепция одинаков.

У меня есть папка с статическими ресурсами. Внутри этой папки у меня есть глобальный файл css. Я загрузил шрифт, который я использовал в качестве файла, и добавил его в свой статический каталог. Но вы могли бы найти его где угодно.

Вот код, который я добавил в мой глобальный файл CSS:

@font-face{
            font-family: **any name you want to give the font**;
            src: url(**location in directory**) format("opentype");
            }

Затем вы просто добавляете его к правилам стилизации, как обычно,

    *{
    font-family: **the same name you gave it above**;
 }
   h1{
    font-family: **the same name you gave it above**;
 }

ЭСТ...

Не забудьте ввести правильный формат. Если ваш файл загружается как .otf, это opentype. Если это .ttf, это truetype.

Я еще не понял, как включить шрифт из CDN. Если я это выясню, я дам вам знать.

Ответ 4

Лучший способ

Определите (если вы используете шрифты Google)

@import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');

$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';

Для vuetify 2+

.v-application {
   font-family: $body-font-family, sans-serif !important;
    .title { // To pin point specific classes of some components
       font-family: $title-font, sans-serif !important;
    }
 }

В app.vue или отдельном файле scss/css, импортированном непосредственно в app.vue

Для vuetify 1.5.x В свой скрипт app.vue добавьте

.application {
  font-family: "Font Family Name";
}
.headline,
.title,
.subheading{
     font-family: $body-font-family !important;
}

Например, если вы используете шрифт Google, тег вашего скрипта должен выглядеть следующим образом:

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");

.application {
  font-family: "Questrial";
}
</style>

Ответ 5

Если вы используете Vuetify 2+, процесс будет очень похож на ответ jeffbaumes, но с использованием Sass вместо Stylus

// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';

$body-font-family: 'My Custom Font', cursive;

$heading-font-family: $body-font-family, cursive;

@each $heading, $style in $headings {
    $headings: map-merge($headings, ($heading: map-merge($style, ('font-family': $heading-font-family))));
}

Или вы можете изменить шрифты одних стилей заголовков, а не других, например:

$headings: map-merge($headings, ('h3': ('font-family': 'Custom Font Name')));

Ответ 6

К сожалению, ответ @alice-mx у меня не сработал (не удалось импортировать из node_modules).

Вот как я решил эту проблему в своем коде (используя Vuetify 2):

Загрузив нужный файл .woff2 и поместив его в src/assets/fonts, Я добавил этот код в свой файл App.vue (или любой основной файл Vue, который вы установили в своем проекте):

// App.vue
<style>
$typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline; // all md typography options provided by vuetify

%font-choice {
  font-family: "Noto Sans", sans-serif !important;
}

@mixin md-typography {
@each $typoOption in $typoOptions {
  .#{$typoOption} {
    @extend %font-choice;
  }
}

.v-application { // This is where we'll add all the md-typography classes
  font-size: 12px;
  @extend %font-choice;
  @include md-typography;
}

// add font-face because in this case Noto-Sans is taken from Google fonts
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans"), local("NotoSans"),
    url("[email protected]/assets/fonts/noto-sans-v9-latin-regular.woff2") format("woff2");
}
</style>

Надеюсь, это поможет!

Этот ответ помог мне сформировать код .scss

Ответ 7

Для пользователей Laravel Vuetify это все, что вам нужно: обновите файл webpack.min.js так, чтобы он выглядел следующим образом:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/main.scss', 'public/css')
   .stylus('resources/stylus/main.styl', 'public/css');

Ваш main.styl должен находиться по пути: resources\stylus\main.styl Ваш файл main.styl должен выглядеть следующим образом:

@import url("https://fonts.googleapis.com/css?family=Literata:400,500,600,700&display=swap");

$body-font-family = 'Literata', serif
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'
// For a-la-carte
@import '~vuetify/src/stylus/app'

Чтобы Vuetify не писал встроенные стили, которые могли бы переопределить ваш main.css, выполните:

 mix.options({
      extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
      });

И наконец, убедитесь, что стилус-загрузчик уже настроен, если не запускается в командной строке:

$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev

Вы также можете npm установить материал-дизайн-иконки-иконки.

npm install material-design-icons-iconfont --save

Ответ 8

Для меня с помощью Nuxt.js с модулем Vuetify было просто установить основной шрифт в variables.scss, например:

$body-font-family: SofiaPro, Roboto;

Все остальные шрифты являются производными от этого.

Файл переменных по умолчанию ('~ vuetify/src/styles/styles.sass') импортируется автоматически впоследствии и игнорирует переменную, если она уже была установлена (благодарю! Default). Поэтому больше нет необходимости изменять $ heading-font-family и отдельные $ заголовки.

Чтобы это работало с модулем Nuxt, не забудьте установить treeShake: true в файле nuxt.config.js. Если вы не используете Nuxt.js, то, вероятно, вам нужно импортировать файл переменных после установки основного шрифта.

Ответ 9

Руководство по проектированию материалов

Ссылка здесь