本記事はSEOには全く関係ありませんが、自作フォントを作成し、本サイトに掲載してみようという実験的な記事になります。
はじめに
サイト名は Mochiy Pop P One というGoogle Fontを利用して気に入っているんですが、本サイトのデザインと合わせるとBoldが絶妙にダサく感じてきてしまいました。キャッチコピーと対比させて強調したかったんですが、スタイリッシュな感じのほうがいいかなあ、太字が野暮ったいかなあ、なんて思っていました。ただフォント選びとは難しくどうしようか迷っていたのですが...
作ってしまえばいいのでは？
なんとなく自作フォント作ってみたくない？
という衝動にかられてフォントを作ることにしました。とはいっても「WordPressのSEO改善レシピ」「SEOPlus」「自作フォントをつくってみた」というひらがな・漢字・カタカナ・アルファベットだけなので作業量は少ないです。
完成したフォント
で、早速完成したロゴのフォントがこちら。
う、うん。きっと微妙ですよね。でも手作り感があってとても気に入っています。Plusのぎゅうぎゅう感がとてもいい。スマホだといい感じなんです。当然ですが u の上に矢印を書いてみたりもできます。だからこそ自作って楽しいですよね。ただヘッダーのサイト名が読み込めていないと致命的で嫌なので、最初はフッターのサイト名だけに適応しています。まれに適用されないんですよね。しばらく様子見て問題を解決したらヘッダーのサイト名にも使おうと思います。
追記: 現在はサイトのヘッダーにも独自フォントを用いています
作り方の紹介
iFontMaker というiPadアプリを利用させていただきました。フォント作成は職人技だと思い込んでおり、カーニングって何？トラッキングって何？レベルでしたし、今でも正しく理解はできていません。それでも完成させることができたので本当に素晴らしいアプリだと思います。
さて、早速ですが、iFontMaker ではこのような感じに各アルファベットを手書きしていきます。自分は Apple Pencil を利用して書きました。ちなみにウェイトやスタイルなどは作成していないのでご注意ください。
作成した各文字のフォントを合わせて表示させて全体のバランスを確認します。ここで字間を空けたりすることで確認できます。
保存は右上の共有ボタンより作成できます。
ttf ファイルが生成され、Webサイト上にアップロードしてくれるのでダウンロードもカンタンで本当に最高でした。
Windowsに取り込みます。手書きしたアルファベットが表示されています。うまくいっているようです。
そしてWebサイトに適用します。まず任意のディレクトリにファイルを配置し、CSSの@font-face でフォントを読み込みます。自分の場合は ttf と woff の二つのファイルを用意しています。 woff はコンバータ を利用して作成しました。そしてfont-family で設定すれば完了！
@font-face {
font-family: 'seo-plus';
src: url('/wp-content/myfont/SEOPlus_Font_v1.woff') format('woff'),
url('/wp-content/myfont/SEOPlus_Font_v1.ttf') format('truetype');
display: swap;
}.footerlogo {
font-family: 'seo-plus', sans-serif;
}すると無事にフォントが表示されました。めちゃくちゃ簡単にできました。
以上になります。みなさんもぜひ自作フォントを作ってみませんか？
それでは次の記事でお会いしましょう👋