nuxt.js
Googlefonts

Nuxt.jsでGoogle Fontsを使う

nuxt.jsで作ったサイトにGoogle Fontsを使いたかった。

URL指定で個別に読み込む方法もあるが、今回はnuxt-webfontloaderを使った。


環境

Mojave 10.14.3(18D109)

node.js v10.11.0

yarn 1.10.1


手順


1. nuxt.jsでプロジェクト作成

$ yarn create nuxt-app プロジェクト名


2. nuxt-webfontloaderをインストール

$ yarn add nuxt-webfontloader


3. nuxt.config.jsを編集


nuxt.config.js

module.exports = {

// 省略
modules: [['nuxt-webfontloader']],
webfontloader: {
google: {
families: ['Josefin+Sans']
}
},
// 省略
}


4. 導入したフォントを使ってみる


pages/index.vue

<template lang="pug">

section
h1 ABCDEFGHIJKLMNOPQRSTUVWXYZ
h1 abcdefghijklmnopqrstuvwxyz
h1 1234567890
</template>

<style lang="scss" scoped>
h1 {
font-family: 'Josefin Sans', sans-serif;
}
</style>


$ yarn dev

localhost:3000にアクセス。

スクリーンショット 2019-03-20 11.10.40.png