Markdownブログにフォントを導入する

フォントを導入することができた

↑の文章はGoogle Fontsに収録されているフォントKosugi Maruで記述している。　　

Markdownの利点の一つに文章中にHTMLを組み込むことができる点である(インラインHTML)
まあ、そもそもMarkdownのビューはHTMLへの変換であるから当然であるが、これは非常に便利
例えばブログ内にTwitterのツイート埋め込みやAmazonのアフェリエイトリンクを組み込むことができる。
そのため、Fontを適用することも当然できるのだが、フォントファイルをサーバーにおいたりが面倒

しかし、最近Google Fonts(https://fonts.google.com/)に新たな日本語フォントが収録されて、これらがかなり高品質!　

さっそく、Markdown内に導入してみた。　　

導入手順

使用するフォントを選択する。

Google Fontsで検索欄の下にあるLanguageからJapaneseを選択する。
日本語フォントのなかから使いたいフォントを選び、いくつかのStylesのなかから使用したいStyleの右のSelect this styleを押す。

フォントをMarkdownにインクルードする。

サイト右上の謎アイコン[View your selected families]を押し、Selected familyを開く。
Use on the WebのlinkタグのコードをコピーしMarkdownの上の方にそのまま貼り付ける linkタグのコードとは、例えばDela Gothic OneのRegular 400だったら以下のような感じ

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">

そしたら貼り付けたコードの下辺りに次のようなstyleタグコードを書く。　　

<style>  
.delaGothicOne{
font-family: 'Dela Gothic One', cursive;
}
</style>

ここでfont-familyはGoogle Fontsのlinkタグコードの下にあるCSS rules to specify familiesをコピペしている。

二行目の.delaGothicOneの部分は任意の名前、私はフォント名をキャメルケースで記述する。

フォントをテキストに適用させる。

適用したいテキストを囲うようにspanタグを記述する。例えば、

ここの文章のフォントが変更されている。
というような形でかわる。上記の記述はMarkdownソースコードでは

<span class="delaGothicOne">ここの文章のフォントが変更されている。</span>  

という感じになっている。基本的にはMarkdown中のどこにでもspanタグは挿入することができるだろう。
※HTMLの入れ子構造を破壊するような挿入方法はできない

一度理解してしまえば非常に簡単

実装記述量は非常に少なく、かつその殆どはGoogle Fontsからのコピペである。　尚且、ここでの実装は環境に依存しないため移植が容易なのが良い。　　具体的にどのように実装されているかはこのページのGitHub上のMarkdownファイルを参照すると良いだろう。