Isaaxフォントを使ってみた

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の18日目の記事と、

https://qiita.com/advent-calendar/2018/isaax の18日目の記事です

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フォントを指定します。さらに、h1font-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>

Write-Blog-Every-Weekのサイトに使ってみて比較

フォントなので実際に見てもらいたいです。

未使用

f:id:yoshitaku_jp:20181215162345p:plain

IsaaxFont使用

f:id:yoshitaku_jp:20181215162402p:plain

かっこいいですね!気に入ってます!

まとめ

  • IsaaxFontかっこいい!
  • scssを使って、フォントファイルを読み込み使った。
  • フォントを変えるだけで見た目が凄く変わるのでこれからは注目してみようと思う!