サイト全体のフォントを変更する

投稿日:2020年10月7日

更新日:2020年10月7日

CSSファイルを作って保存

「gridsome-site-starter\src\assets\cssstyle.css」に新しく作ったCSSを保存します。
Bootstrapでは物足りない…そんな時はこっちに追記していきましょー

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Noto+Serif+JP:wght@700&display=swap');
/* font-family: 'Noto Sans JP', sans-serif; */
/* font-family: 'Noto Serif JP', serif; */

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Noto Sans JP" , "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, 'Open Sans', sans-serif;
}

グローバルスタイルをインポートする

公式documentのUse CSS in Gridsomeを参考に、CSSを読み込みます。

「src/main.js」CSSの読み込みを追記します。

import '~/assets/css/style.css'

サイトに反映されていることが確認できれば出来上がり!

目次ページに戻る