この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の18日目の記事と、
https://qiita.com/advent-calendar/2018/isaax の18日目の記事です
tl;dr
- Isaaxフォントを使ってみた
- Vueでのフォントファイルの使い方がわかった
- かっこよくてお気に入り
Isaaxフォントとは
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>
Write-Blog-Every-Weekのサイトに使ってみて比較
フォントなので実際に見てもらいたいです。
未使用
IsaaxFont使用
かっこいいですね!気に入ってます!
まとめ
- IsaaxFontかっこいい!
- scssを使って、フォントファイルを読み込み使った。
- フォントを変えるだけで見た目が凄く変わるのでこれからは注目してみようと思う!