今回のHTML講座はいつか寛斗様にコメントいただいたフォントの件についてになります。前提条件は先日の記事「【HTML】アメブロで縦書き記事を書きたい」と同じです。早速本題に移りたいところですが、もう少し。
・非推奨(廃止)タグであることを考慮の上使用すること
⇒今回紹介するタグは定義上とっくに廃止された古いものです。互換性が考慮され現在も有効ですが、将来性は期待できません。ブラウザアップデートのタイミングで、折角変えた筈のフォントがデフォルトフォントに戻ってしまった、という事態があり得ます(※)。それでも良ければ使ってみてください。※フォントを変えた文字が消えたりはしないので大丈夫ですよ。
・ブログ全体のフォント変更ではなく、任意の箇所のフォント変更について扱う
⇒部分的なフォント変更のほうが需要があると判断しました。記事単位でのフォント変更もできますので、結果としてブログ全体のフォント変更にも対応可能です。ブログ全体のフォント変更については、もっと簡易かつ非推奨ではない方法があるので、本記事末にレクチャサイトへのリンクを貼っておきます。
【追記（2023/9/9 8:55】
スマホ（android12）＋Amebaアプリでは、フォントの変更が反映されませんでした。PCでの閲覧が対象ということも前提に加えておきます。iphoneでの表示は未確認です。
【手順】
①エディタにいつものように記事を書きます。最下部赤枠の通り「通常表示」で書いています。理由は皆さんそうしてるんだろうな、ということで。
※なにやら馬鹿そうな歌が書いてありますが、小学校低学年に作った歌なのでお手柔らかにお願いします。歌うなら大威張りでどうぞ（そういう歌なんです）。
②エディタを「HTML表示」に切り替える。<p>、<br>の改行タグが表示されています。
③-1.ここで魔法のタグが登場します。
<font face=" "></font>
少し説明を。
font:タグになります。<font>と</font>で囲うことによって、囲まれた中のフォントサイズや色、文字の装飾、書体などの調整が可能になります。冒頭で触れましたが、このfontタグが非推奨（廃止）になっています。
face：「属性」と呼ばれるものです。「font」タグの後に半角スペースを入れ、この属性：「face」を追記することによって初めてフォントの書体変更が可能になります。属性は「face」以外にもいろいろありますが、書体の変更から話がそれるので説明を省きます。
” ”：「"」(ダブルコーテーション)の間に半角スペースをあけましたが、わかりやすいようあけているだけです。「"」と「"」の間にフォント名を入れることで、入れたフォント名の書体に変更可能です。
③-2.実際にやってみましょう。③-1冒頭のタグ<font face=" ">と</font>を書体を変えたい場所に記述して囲います。今回は「"」と「"」の間のフォント名として、効果がわかりやすいよう「HG行書体」をチョイスしました。<font face="HG行書体">と記述しています。
※英数字・記号の表示も確認したいので、歌を長くしておきました。また、図では<p>、</p>の外側を囲っていますが、本当は内側が正しいかと。まあ、効果に変わりないので良しとしますか(スミマセン)。
③-2.効果の程はいかに？最下部赤枠「通常表示」に切り替えてみると、ハイ、HG行書体に切り替わっています。
※見づらいのでフォントサイズをXLサイズに変更しています。
プレビュー画面も。
以上で終了になります。文字だけの記事であれば、文頭と文末を囲めば、記事全体の書体が変えられます。画像や動画を含む場合は、その箇所を避け、複数回に分けて囲む感じでしょうか。
【フォントの種類について】
「"」と「"」の間に入れるフォント名については数多くあり、ここに書くと膨大な量になります。下記サイトなどを参考にしてみてください。
※表の「フォント名」にある名前をそのままコピペでOKです。ただし、「’」（シングルコーテーション）で囲われている場合は、「’」を外してコピペしてください。
上記サイトよりフォント名をコピペして、いろいろ遊んでみます（笑）。
むぎちゃんWo（ＭＳ 明朝）
我が目につけて（Impact）
寝ていたい（HG正楷書体-PRO）
ああ気持ちE（Comic Sans MS）
【ブログ全体のフォント変更について】
冒頭で「もっと簡易かつ非推奨ではない方法がある」と書きましたが、以下のサイトなどを参考にしてみてください。
最後に、本当ならこういう手書き風フォントを使いたいですよね。
これを実現するには、アメブロサーバーの自分のブログを管理している場所にフォントファイルをアップロードし、PHPファイルにリンク先を記述する必要があると思います。いずれもアメブロでは無理なので残念無念です。運営側のリスクを考えると、要望を出しても実現しないでしょう。どうしてもフリーフォントを使いたいのであれば、自分のホームページスペースでやるしかないでしょうね。
本記事は右サイドの「HTML」テーマに入れておきます。以上になります。