Vue.jsでCSSが適用されない

Question

前提・実現したいこと

Nuxtで構築しているWebページに font-family: Montserrat を適用したい。

発生している問題・エラーメッセージ

Vue.js(Nuex.js)にて font-family: Montserrat が効かない状態です。
テキストのサイズやカラーは指定すれば変わりますが、フォントだけが変わりません。
自分が作成中のページと同じフォントを使っているサイトを閲覧するとちゃんと表示されるので、ブラウザの問題ではないと思っています。
以下に試したことを書きますので、他に原因が考えられそうな箇所があればご教示いただけると幸いです。

該当のソースコード

layouts/default.vue

<template>
  <p>Back</p>
</template>

.
.
.


<style lang="stylus">
html
  font-family Montserrat
  color: #97979c
</style>

試したこと

・WhatFontというChrome拡張で実際のフォントを調査。
→Montserratは優先されているがsans-serifが使用されている。

・!importantを使用する。
→効果なし。

・他のフォントを使用する。（メイリオ、YuGothic等）
→適用されない。

・ yarn run dev でサーバ再起動。
→変わらない。

・別ブラウザ(Safari、FireFoxで試す)
→効果なし。

補足情報（FW/ツールのバージョンなど）

Nuxt.js v2.10.2
Vue.js 3.12.0
ブラウザ： Cherome 78.0.3904.108

Answer 1

他に原因が考えられそうな箇所

表示されるページでは Webfont を使っているとか。

【Montserrat - Google Fonts】
https://fonts.google.com/specimen/Montserrat

【Montserrat | Adobe Fonts】
https://fonts.adobe.com/fonts/montserrat

Comments

[qazu]

おっしゃる通りGoogle Fontsでした！
Web Fontsを知らなかったのでハマりました。
おかげさまで一発解決しました。大変助かりました。
ありがとうございました。