Vuetifyでデフォルトのフォントを変更する方法がわかりません。 ./node_modules/vuetify内で適切な変数を探していましたが、見つけることができません。
理想的には、モジュールに変更を加えず、モジュールの外部からそのような変数をオーバーライドします。
最も簡単な方法は、body
にフォントファミリを設定することです。 Webpackを使用してVuetifyスタイラスエントリmain.styl
をインポートしている場合、$font-family
変数を任意のフォントで上書きできます。
少なくとも最近のバージョンの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 }
}
最良の方法
定義(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またはapp.vueに直接インポートされた別のscss/cssファイル
ために 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>
これが「ベストプラクティス」であることを保証することはできません。しかし、これを適切に行う方法に関するドキュメントがないことを考慮して、どのようにこれを達成したかを説明します。
Nuxt webpackテンプレートを使用しているため、私のファイル構造はあなたのものとは少し異なるかもしれませんが、コンセプトは同じです。
静的なアセットフォルダーがあります。そのフォルダー内には、グローバルな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**;
}
ect ...
正しいフォーマットを忘れずに入力してください。ファイルが.otfとしてダウンロードされる場合、それはopentypeです。 .ttfの場合、truetypeです。
CDNのフォントを含める方法はまだわかりません。私がそれを理解するならば、私はあなたに知らせます。
残念ながら、@ 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("~@/assets/fonts/noto-sans-v9-latin-regular.woff2") format("woff2");
}
</style>
これが役立つことを願っています!
これ answer は、.scssコードの作成に役立ちました
Vuetify 2+を使用している場合、プロセスはjeffbaumesの答えに非常に似ていますが、スタイラスの代わりにSassを使用します
_// 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')));
Vuetify Module でNuxt.jsを使用してうまくいったのは、次のように、variables.scssで本体フォントを設定するだけでした。
$body-font-family: SofiaPro, Roboto;
他のすべてのフォントは、このフォントから派生しています。
デフォルト変数ファイル( '〜vuetify/src/styles/styles.sass')はその後自動的にインポートされ、既に設定されている変数は無視されます(!defaultのおかげです)。したがって、$ heading-font-familyと個々の$ headingsを変更する必要はもうありません。
これをNuxtモジュールで動作させるには、nuxt.config.jsファイルでtreeShake:trueを設定することを忘れないでください。 Nuxt.jsを使用していない場合は、おそらくボディファイルを設定して変数ファイルafterをインポートする必要があります。
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
Material-design-icons-iconfontをnpmインストールすることもできます。
npm install material-design-icons-iconfont --save