Blog
フォントを変えたよ/備忘録
2025/08/26現在
サイトを更新しました！
今回はフォントの種類を変えてみました。
これまでのZen丸ゴシックから、「マメロン」というフォントに変更しています。
丸みを帯びた雰囲気は残しつつ、少しだけエレガントになったのではないでしょうか。
せっかくなので更新中に困った部分を記事として残しておくのはどうだろう？と思ったので、備忘録としてフォントの更新手順をここに記しておきます。誰かのサイト制作の参考になるかもしれないし、ならないかもしれません。
私はスターレンタルサーバーを利用しているので、同じ環境でウェブサイト制作を行っている人なら、同じ手順でできるかも。
～手順～
- １，フォントを見つける
- ２，フォントを「使える形」にする
- ３，フォントをアップロードする
- ４，CSSに記述する
１，フォントを見つける
何はともあれ、欲しいフォントを見つけましょう。
世の中にはたくさんのフォントがあります。フリーフォントだけでもいろんなものがあり、目移りしちゃうかも。
いくつかおすすめのフリーフォントサイトをご紹介するので、参考にどうぞ。いろいろ探してみてください。
・フロップデザイン様
https://www.flopdesign.com/
・もじワク研究様（「マメロン」はこちらから）
https://moji-waku.com/index.html
・Booth/Mokuzai様
https://mokuzai.booth.pm/
・Google Fonts（「Zen丸ゴシック」などはこちらから）
https://fonts.google.com/
気に入ったフォントがあればダウンロード！
（Webサイトに使用する場合、Google Fontsだけは実装手順が違います。その場合は調べてみてね。）
基本、フリーフォントはttfファイル形式かotfファイル形式でダウンロードされます。ダウンロード後にこれらのファイルを開くと…
Windowsではこのようなウィンドウが表示されます。
インストールボタンを押すと、そのパソコンでフォントが使用できるようになります。WordやExcel、各種デザインソフトなど、パソコン内でもフォントを使いたい場合はインストールしておきましょう。
また、フォントには著作権と利用規約があります。サーバーにアップロードしてもいいのか、webサイトに使っていいのかなど、事前に確認してね。
ただし、これらをWeb上で使うには一工夫必要です…！手順２へつづく。
なお、すぐにWebサイトで使用できる形式に整えてくれているサイトもあります（もじワク研究様等）。ダウンロードページにWebフォント用ファイルがある場合は、有難く頂きましょう。Webフォントを直接手に入れる事ができた方は手順3へ。
２，フォントを「使える形」にする
先述したotf形式やttf形式では、ウェブサイトに組み込むことができません。面倒なことに！
そこで、これらのファイル形式をwoff,woff2,eofなどのウェブサイトが読み込んでくれるファイルの形式に変換する必要があります。
変換用のソフトを武蔵システム様が提供してくれているので、ダウンロードしちゃいましょう。
https://opentype.jp/woffconv.html
シンプルなソフトなので怖がらなくても大丈夫です。
とりあえず「変換前ファイル」のところにダウンロードしたフォントのファイルを置き、変換を実行すればwoffファイルが出来上がるはずです。
その際に下のチェックボックスをクリックして、woff2ファイルも作っておきましょう。eofもあって困ることは無いので、お好みで。
３，フォントをアップロードする
この辺は環境によって全然勝手が違うと思うので、各々の環境の説明なども参照しつつ設定してみてください。
私はサービス側でファイル管理機能を提供してもらっているので、そこから直接アップロードする形になります。Public_htmlフォルダ内に「font」フォルダを作り、中に先ほど作ったWeb用のフォントファイルを入れました。
他のサービスを使っている場合も、とりあえずindex.htmlが存在する階層に「font」フォルダを作成すれば大丈夫でしょう。
woffも、woff2も、eofも全部「font」フォルダ内に入れてしまってOKです。これでサーバー内にフォントのデータが入った状態になります。
４，CSSに記述する
あとはウェブサイト側でフォントを適用させるだけ！
ここは少しややこしく、またCSSの記述方法、テンプレート・フレームワークなどにより変わってくるので、慎重に行わないとバグります。
まずは、CSSにフォントファイルを読み込んでもらいます。今回導入した「マメロン」を例にします。
フォントは、CSSで@font-faceタグを使用して設定しましょう。
font-family:"mame"部分では、
「このCSSではこのフォントのことを『mame』と呼ぶよ」と宣言しています。名付けです。
src:url("font/Mamelon-3HiRegular.woff2") format("woff2")部分では、
「『font』フォルダ内のMamelon-3HiRegular.woff2というファイルを参照してね。ちなみにこのファイルのフォーマットはwoff2だよ」と宣言しています。
フォーマットの指定をミスるだけでも読みこんでくれないので、慎重にいきましょう。
複数のフォーマットのフォントファイルがある場合は、url("font/Mamelon-3HiRegular.eof")…のように、下に続けていきましょう。
これで「CSSの中でフォントが使える」ようになりました！
つまり、まだどこにも反映されていません。実際にサイトに使っていきます。
私はサイト全体にフォントを反映させたかったので、この辺の設定は簡潔に済ませておきました。
bobyタグの設定にfont-familyを記述することで、ウェブサイトとして表示される範囲すべてにフォントを設定しています。
font-family部分を見ると、色々なフォントの名前がズラーッと並んでいると思います。羅列されたフォントは手前から優先的に反映されていきます。
画像の場合で言うと、もしも「mame」が使えなかったら今度はZen Maru Gothicを試して、それでもだめならAvenirを試して……と、優先度順にフォントが試行されていきます。一番後ろのMSゴシックやサンセリフあたりは多くのデバイスに入っているフォントなので、最後の砦として記述されています。
つまり、使いたいフォントは手前に、どんなコンピューターにでも入っている汎用的なフォントは後方に配置しよう！ということです。
この辺の知識がミリしらだと本当にめんどくさいと思うので、インターネットの知を頼りましょう。
https://saruwakakun.com/font-family
サルワカ様の、font-familyの記述を自動生成してくれるスーパー便利サイト。
いろいろカスタムできますが、とりあえず上のほうにある「あのサイトはこんなフォントを使っています」部分の「おすすめ」ボタンを押し、下部に生成されたコードをCSSへコピーペーストしてしまってください。
生成されたコードの一番手前に、先ほど使えるようにしたフォントの名前（ここでは"mame"）を付け足せばOKです。カンマやコロン忘れにお気をつけて。
もしもここまでやって上手くいかなければ、記述漏れやURLの書き間違い、ウェブサイトのスーパーリロード（ctrl+f5）などを試してみてください。
いっそのことCSSをコピペしてAIに聞いてみてください。結構なんとかなります。
完成！
BACK