Vue プロジェクトが外部フォントをインポートする

---

1. vue プロジェクトで外部フォントが導入される

1. フォント パッケージをオンラインでダウンロードします。

2. フォントをプロジェクトにインポートする

3. 次に、css フォルダーに font.css ファイルを作成します。このファイルは、インポートされたフォントを宣言し、フォント名を定義するために使用されます。

@font-face {
    
    
  font-family: 'Source Han Sans CN-Medium'; 
  src: url('../font/SourceHanSansSC-Medium.otf'); 
  font-weight: normal;
  font-style: normal;
}

@font-face {
    
    
  font-family: 'Source Han Serif SC-Bold'; 
  src: url('../font/SourceHanSansSC-Bold.otf'); 
  font-weight: normal;
  font-style: normal;
}

4. main.jsにfont.cssファイルを導入

5. CSSでの使用