【Vue.js】Google Fontsの使い方

まずは公式ページでフォントを選ぶ

公式サイト：Google Fonts

フォントが決まったら[+ select this style]を押下

「Use on the web」という箇所があるので、そこでimportを選択。

importが選択できたら下記コードをコピー

<style>
@import url('https://fonts.googleapis.com/css2?family=(選択されたフォント)&display=swap');
</style>

font-family: (選択されたフォント)；

styleタグ内にペースト

これをコピーしてstyleタグ内に貼り付けます。

scss

<style scoped lang="scss">
@import url("https://fonts.googleapis.com/css2?family=(選択されたフォント)&display=swap");

.ttl {
    font-family: (選択されたフォント)；
</style>

たったこれだけでGoogle Fontsが使えるようになりました。