自作Webフォントを導入したお話。(詳細版)

どうも猫月あゆむです。
ブログ構築2日目の記事 で、自作フォントを導入したよ!っていうお話をしたと思います。
ツイッターで質問が来てたのでそれの詳しい解説です。

導入方法

導入方法自体は結構簡単でした。

参考:Webアイコン「IcoMoon」の使い方とアイコンの追加方法

まず、フォント化したい画像、アイコンとかを SVG 形式で用意します。
画像が用意できたら、icomoon というサイトを利用してフォント化します。

フォント化方法

ざっとこんな感じ。わからないことあったらコメント欄へGO

  1. 右上インポートからSVGを読み込む
  2. 入れたいアイコンを選択し、右下「Genelate font」をクリック
  3. アイコン名、大きさなどを調整
  4. 画面右下ダウンロードの隣の をクリック
  5. 項目を以下のように改変

理由としては、

Class Prefix
 fontawesomeとの競合避けその1

Use i
 hexoで色んな所で使うにはfontawesomeと合わせないと、_config.ymlから編集できない(うまく反映されない)

って感じです。

設定できたらダウンロード。

hexoへ導入

ここから先は、利用しているテーマによってかなり変わってきます。
当ブログでは「Icarus」を利用しているのを前提に解説します。

まず、DLしたファイルを以下のように配置します。

1
2
3
4
5
6
7
8
9
10
blogdir/
└ themes/
└ icarus/
└ source/
├ css/
├ img/
└ fonts/ //なければmkdir
├ style.css //DLファイル
├ selection.json //DLファイル
└ fonts/ //DLファイル

次に、head.jsx を編集します。
head.jsxは以下の場所に格納されています。

1
...blogdir/themes/icarus/layout/common/head.jsx

そして以下のように書き換えます。

head.jsx
1
2
3
4
- <link rel="stylesheet" href={iconcdn()} />

+ <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.13.0/css/all.css" />
+ <link rel="stylesheet" href="/fonts/style.css" />

_config.ymlで指定している fontawesomeを切って、直で読み込ませます。
あと、さっきの自作フォントも読み込ませます。

直で読み込ませてるのは競合対策です。

これで、<i class="icon2-niconico"></i> ってすると 読み込めます。

おまけ:プロフィールに自作フォントを使う

themes/icarus/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/AyumuNekozuki'
Twitter:
icon: fab fa-twitter
url: 'https://twitter.com/nekozuki_2525'
niconico:
icon: icon2-niconico
url: 'https://www.nicovideo.jp/user/45048152'
RSS:
icon: fas fa-rss
url: /atom.xml

以上。何か質問あったらコメント欄へどうぞ。

最後に一言。

アウトプットは大事。

コメント