# LN フォントの統一について

## 問題

Vutify のデフォルトFont とLNのデフォルトフォントが現状異なっているせいで、現状二つのフォントが表示されていました。

Vuetify のフォント(vuetify のテキストクラスを使用すると適用)
`font-family: Roboto,sans-serif!important;`

LNのフォント
`font-family: "Noto Sans JP",sans-serif !important;`

## フォント統一について

### 結論

==パターン①とパターン②で表示フォントの統一を実施し、パターン①でフォントが切り替わらなかったため、パターン②で対応しようかなと思っていますご確認おねがいします==

### パターン①

「方法」 ドキュメントに従ってsass 変数をOverride して行う

「結論」 エラーがでない状況でビルドしたが fontの上書きが反映されませんでした。

「実施手順」
1. general.scss を編集
resources/js/src/assets/scss/general.scss を以下に変更

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

$heading-font-family: "Noto Sans JP"!important;
$body-font-family: "Noto Sans JP"!important;
@import "~vuetify/src/styles/styles.sass";

$heading-font-family: "Noto Sans JP"!important;
$body-font-family: "Noto Sans JP"!important;
@import './variables';
@import './mixins';

エラーが出ます。パッケージのバージョンを変更すると解消できるらしいので次の対応をしました。

2. ターミナルでパッケージのバージョン変更
$ yarn remove sass --save
$ yarn remove sass-loader --save

$ yarn add sass-loader@7.1.0 --dev
※Dart sassの記述変更の兼ね合いで 1.32以下で最新を指定
$ yarn add 'sass@~1.32' --save

[Dart sass エラーについて](https://kaminarimagazine.com/web/2021/07/09/divide-by-slash-is-deprecated-and-will-be-removed/)

3. _variables.scss の変更

以下の記事と同様の現象が

$ colors 使用箇所であったため$colors の記述とそれに伴う変更の対応をしました。
[Sassでeachを用いた色管理でハマった](https://qiita.com/kent_ear/items/eaa9a803d5bdfa565092)

_variables.scssを編集

$colors:(
    'default': #464646,
    'gray': #bdbdbd,
    'primary': #2e5c95,
    'secondary': #5c92bd,
    'accent': #82b1ff,
    'error': #ff5252,
    'info': #ffe347,
    'success': #268440,
    'warning': #963030,
    'body': #fff,
);

4. ビルドして確認
Noto Sans JP フォントが変更されていなかったです。

自分で調べた所、現状原因が不明。。。。

### パターン②

「方法」今のLN のフォント指定と同じように!important でVuetify のsass をさらに上から上書きして対応

「実施手順」
resources/js/src/layouts 以下のファイルに!important でfont-family を上書いて対応。

- resources/js/src/layouts/BaseLayout.vue
- resources/js/src/layouts/OperatorLayout.vue
- resources/js/src/layouts/SupervisorLayout.vue

上記3ファイルの`<style lang="scss">` #app の下に記述を追加

#app {
    ~~既存の記述~~
    
    [class*='text-'] {
        font-family: $Noto!important;
    }
}