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

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

導入方法

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

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

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

フォント化方法

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

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

理由としては、

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

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

って感じです。

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

hexoへ導入

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

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

blogdir/
     └ themes/
           └ icarus/
                 └ source/
                       ├ css/
                       ├ img/
                       └ fonts/                     //なければmkdir
                            ├ style.css             //DLファイル
                            ├ selection.json        //DLファイル
                            └ fonts/                //DLファイル

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

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

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

head.jsx

- <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

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

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

最後に一言。

アウトプットは大事。