tl;dr

Isaaxフォントを使ってみた
Vueでのフォントファイルの使い方がわかった
かっこよくてお気に入り

Isaaxフォントとは

http://isaax-font.xshell.io/

Isaax Font はアポロ計画やスペースシャトル計画など20世紀後半の宇宙開発計画を意識したフリーフォントです。未知の領域を探索し開拓する人の意志とテクノロジーの力をデザインに投影しています。どなたでも自由に利用することが可能です。

以前Isaaxのアドベントカレンダーを書いているときに、Isaaxでフォントを出していることを知りました。眺めていたらかっこいいですし、コンセプトもよかったので早速使わせてもらいます。

vueでフォントファイルを使うために

ディレクトリの構成

今回は./src/assets/fontsディレクトリにIsaaxフォントを配置します。

tree -I ".cache|dist|node_modules"
.
├── index.html
└── src
    ├── App.vue
    ├── Posts.vue
    ├── assets
    │   └── fonts
    │       ├── IsaaxOrigin-Regular.woff2
    │       └── IsaaxSans-Regular.woff2
    ├── components
    │   ├── PageFooter.vue
    │   └── PageHeader.vue
    └── index.js

.src/components/PageHeader.vueにフォントファイルを読み込む設定

scssの@font-faceで、./src/assets/fontsディレクトリに配置したIsaaxフォントを指定します。さらに、h1でfont-family: 'IsaaxFont';を指定することでフォントが切り替わります。

<template>
    <nav class="page_header">
      <h1>Write Blog Every Week</h1>
    </nav>
</template>

<script>
export default {
  name: 'page-header',
}
</script>
・
<style lang="scss" scoped>
@font-face {
  font-family: 'IsaaxFont';
  src: url('~src/assets/fonts/IsaaxOrigin-Regular.woff2');
}

h1{
  font-family: 'IsaaxFont';
  text-align: center;
  font-size: 64px;
}


</style>