無料Webサイト制作〜美祢咲すみれのWordPress

Googleフォントなど、フリーフォントをCDNで使用する、というのはみなさんやっていると思います。でも、Webフォントとして配布されていないフリーフォントについて、「このフリーフォント、自分のサイトで使ってみたいな」というのもあるのではないでしょうか？

たとえば、私は、「851手書き雑フォント」が好きで、サイトタイトルになど使ってみたいと思っていました。ちょっとググってみたところ、Ubuntuでも、TTF形式のフォントを手軽にWebフォントに使える形式に変換（今回はWOFF2形式）するツールがあったので、ご紹介したいと思います。

では、順番にいきましょう。851手書き雑フォントからフォントをTTF形式でダウンロードします。ダウンロードするとファイル名が「851tegaki_zatsu_normal_0883.ttf」と長くて大変なので、私は「tegaki.ttf」に変更しました。

次に、WOFF2をインストールするため、端末で下記のコマンドを実行します。

sudo apt install woff2

次に、WOFF2形式への変換は、以下のコマンドを実行します。

woff2_decompress fontname.woff2

CSSに適用するには、以下のようにします。（h1に適用する例です）。「tegaki」のところは、任意の名前で大丈夫です。WordPressの場合ですと、テーマディレクトリの中に入れます。

@font-face {
  font-family: 'tegaki';
  src: url(tegaki.woff2) format("woff2");
}
h1 {
    font-family: 'tegaki';
}

アイキャッチ画像のとおりにうまく適用できました。

• HTML/CSS
• Ubuntu
• Web
• WordPress