自作Webフォントを導入したお話。（詳細版）
どうも猫月あゆむです。ブログ構築2日目の記事 で、自作フォントを導入したよ！っていうお話をしたと思います。ツイッターで質問が来てたのでそれの詳しい解説です。
導入方法導入方法自体は結構簡単でした。
参考：Webアイコン「IcoMoon」の使い方とアイコンの追加方法
まず、フォント化したい画像、アイコンとかを SVG 形式で用意します。画像が用意できたら、icomoon というサイトを利用してフォント化します。
フォント化方法ざっとこんな感じ。わからないことあったらコメント欄へGO
右上インポートからSVGを読み込む
入れたいアイコンを選択し、右下「Genelate font」をクリック
アイコン名、大きさなどを調整
画面右下ダウンロードの隣の をクリック
項目を以下のように改変
理由としては、
Class Prefix fontawesomeとの競合避けその１
Use i hexoで色んな所で使うにはfontawesomeと合わせないと、_config.ymlから編集できない（うまく反映されない）
って感じです。
設定できたらダウンロード。
hexoへ導入ここから先は、利用しているテーマによってかなり変わってきます。当ブログでは「Icarus」を利用しているのを前提に解説します。
まず、DLしたファイルを以下のように配置します。
12345678910blogdir/ └ 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.jsx1234- <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.yml12345678910111213social_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
以上。何か質問あったらコメント欄へどうぞ。
最後に一言。アウトプットは大事。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});