【Vue Cli】Google fontsを反映させたい
前回の記事の流れで、今度はGoogle fonts反映の方法もついでに記述しておきます。
まずは使いたいフォントを選び、@importとSpecify CSSのfont-familyを取得してきましょう。
あとはApp.vueに以下のように記述。
<template> <div id="app"> <!--省略--> </div> </template> <script> //省略 </script> <style> @import "./css/styles.css"; /* Google fontsで導入したいfonts から@importのコードを取得 */ @import url('https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap'); #app { /* Google fontsで導入したいfontsからfont-familyを取ってくる */ font-family: 'Saira Stencil One', cursive; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>