ホームページで手書きフォントを使う方法｜自分の字をWebフォントにする手順

お店のホームページの見出しを、店主の字にしたい。家族の字で、思い出のページを作りたい。自分の字で作った手書きフォントがあれば、その字をホームページの文字として表示できます。

結論から言うと、自作の手書きフォント（TTF）は、WebフォントとしてCSSで読み込めば、ホームページで使えます。ひらがなだけのフォントなら、Web向けの形式（WOFF2）で約21KBと軽く、漢字などフォントにない字は、次に指定したフォントで自動的に表示されます。この記事では、仕組み、置く前の注意、変換と書き方、サービスごとの対応を、実際に試した結果つきで説明します。

Webフォントとは？ 自作の手書きフォントも使える

ふつう、ホームページの文字は、見に来た人のパソコンやスマホに入っているフォントで表示されます。Webフォントを使うと、サイトに置いたフォントのファイルをブラウザが読み込んで表示するので、誰が見ても同じ手書きの字になります。

フォントのファイルであれば、自分で作ったものも使えます。フォントつく〜るで作ったフォントは、TTF（TrueType）というよく使われる形式なので、そのままでも、Web向けの形式に変えてからでも使えます。

サイトに置く前に知っておきたい 3 つのこと

権利：フォントのファイルも届けることになる

Webフォントは、見に来た人のブラウザにフォントのファイルを届けて表示します。そのため、サイトに置いたフォントのファイルは、見た人が取り出そうと思えば取り出せます。

• 自分の字のフォントなら、自分の判断で置けます
• 家族など、ほかの人の字のフォントなら、置く前にその人の了解を取ってください
• 人に配りたくない字（亡くなった方の字など）は、ファイルとして持ち出されることも考えたうえで決めてください

フォントつく〜るで作ったフォントの著作権は、作った人のものです。商用利用・再配布・加工も自由なので、お店のホームページにも使えます。

大きさ：ひらがなだけなら数十 KB

日本語のフォントは、漢字が多いぶんファイルが大きくなります。たとえば、日本語用に絞った Noto Sans JP（Regular・OTF）は約 4.5MB です（2026年10月4日、公式の配布ファイルで確認）。

手書きフォントは、入っている字が少ないぶん小さくなります。このサイトで使っている、フォントつく〜るで作った 3 つのフォントを測りました。

（2026年10月4日に当社で測定。字の数や書き方で大きさは変わります）

足りない字：次のフォントで 1 字ずつ表示される

手書きフォントに漢字が入っていなくても、困りません。CSS の font-family にフォントを順に並べると、ブラウザは 1 字ずつ、先頭のフォントにその字があるかを確かめ、なければ次のフォントで表示します。

上の図の ① は、ひらがなだけの手書きフォントを先頭に並べただけの表示です（Chrome で確認）。ひらがなは手書き、漢字・英数字・「。」は丸ゴシックになっています。手書きの字が少し小さく、字の間が空いて見えるので、② では大きさと字の間を合わせました（書き方は後で説明します）。

TTF を WOFF2 に変える

TTF のままでも表示できますが、Web 向けの WOFF2 に変えると、ファイルが小さくなって表示が速くなります。上の表のとおり、当社のフォントでは約 3 割小さくなりました。

変え方は、主に 2 通りあります。

• パソコンで変える（ファイルを外に送らない）： Python の fonttools（woff2 の機能を入れる）や、Google が公開している woff2 の変換ツール（woff2_compress フォント名.ttf）
• ブラウザの変換サービスを使う： ファイルを選ぶだけで変えられる。ただし、フォントのファイルを一度その会社のサーバーに送ることになる

HTML・CSS に書く手順

自分でホームページの HTML・CSS を書いている場合の手順です。

@font-face {
  font-family: "WatashiNoJi";
  src: url("/fonts/watashi.woff2") format("woff2"),
       url("/fonts/watashi.ttf") format("truetype");
  font-display: swap; /* 読み込むまでは次のフォントで先に表示 */
}

h1, .tegaki {
  font-family: "WatashiNoJi", "Hiragino Maru Gothic ProN", sans-serif;
}

font-display: swap は、フォントを読み込むまでの間、次のフォントで先に文字を出しておき、読み込めたら手書きに替える指定です。フォントのファイルが小さいほど、替わるまでの時間も短くなります。

WordPress で使う

WordPress 7.0 以降では、管理画面の「外観 > フォント」（Font Library）から、自分のフォントのファイルを追加できます。ブロックテーマでもクラシックテーマでも使えます（WordPress 公式の説明書による。2026年10月4日確認）。

• 「アップロード」のタブで、TTF・OTF・WOFF・WOFF2 のファイルを追加する
• 追加したフォントを、「外観 > エディター > スタイル」で見出しや段落に割り当てる（選べる所はテーマによって違う）

7.0 より前の WordPress や、テーマのつくりによっては、子テーマの CSS に上の @font-face を書く方法になります。

Wix・STUDIO など、サービスごとの対応

ホームページ作成サービスでは、自分のフォントのファイルを追加できるかどうかが、サービスによって違います。各社の公式ヘルプで確かめた内容です（2026年10月4日時点）。

Jimdo・ペライチ・BASE などは、公式のヘルプで自分のフォントを追加する方法を確かめられませんでした。使っているサービスのヘルプで「フォント」「アップロード」と調べてみてください。料金プランによって使えないこともあるので、あわせて確かめてください。

このサイトで実際に使っている例

フォントつく〜るのトップページでは、パソコンの広い画面で開くと、左右の余白に「ようこそ」「Hello」などの手書きの文字が出ます。この文字は画像ではなく、フォントつく〜るで作った手書きフォントを、この記事と同じ @font-face で読み込んで表示しています。

• 使っているのは、上の表の A・B・C の 3 つのフォント（TTF のまま読み込み）
• 手書きの字の間が広く見えたので、letter-spacing で字の間を詰めている
• 文字なので、あとから言葉を変えるのも CSS と HTML を直すだけ

フォントつく〜るの場合

作ったフォントには、「フォントつく〜る製」であることを示す情報が埋め込まれます。表示や使い方には影響しません。手書きフォントの作り方そのものは、手書きフォントの作り方で説明しています。

まとめ