@font-faceを使ってサイトにウェブフォントを読み込む方法

このような手書きフリーフォントが出ていたので、これをサイトに読み込んでみようと思います。

Free Font: Blogger Sans › FreeTypography

How to Start a Blog – The Free Beginner’s Guide to Blogging

「Blogger Sans」フォントのライセンスはCCA 4.0だそうです。
取り扱いにご注意ください。

フォントの読み込み方

今回、今まで読み込んでいたGoogle Fontsの「Open Sans」とは違い、クイックユーズ(Quick Use)を使わずにフォントファイルを読み込んで表示させます。

フォルダの構成

まず、CSS3から追加された@font-faceを使ってフォントファイル名とフォントファイルへのパスを指定します。なお、フォルダ構成はダウンロードしたものから以下のように変更しています。

index.html
├─ [css]
│    └─ BloggerSans.css(.css 前の名前は別になんでもいい)
└─ [fonts]
     └─ ~.eot, ~.ttf, ~.woff, ~.svgなどのデータ・フォントファイル

フォントファイルの読み込み

CSS内では以下のように読み込みます。

@font-face {
  font-family: 'BloggerSans';

  src: url('fonts/BloggerSans.eot'); /* IE9 Compat Modes */
  src:
    url('fonts/BloggerSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/BloggerSans.woff') format('woff'), /* Modern Browsers */
    url('fonts/BloggerSans.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/BloggerSans.svg#BloggerSans') format('svg'); /* Legacy iOS */
}

使用したい場所への指定

次に、フォントを使用したいところにfont-familyを指定します。

h1 {
  font-family: "BloggerSans", Georgia;
}

あとはfont-sizeや、font-weight, font-styleの指定で細くデザインを調整します。

デモ

デモも作成してみましたので、ご覧ください。
デモのテキストにはcontenteditable=contenteditable属性をつけているので、ブラウザ上でテキストの編集が可能です。(ブラウザにもよっては対応していない場合もあります)

 


参考

実はすごく簡単!webフォントの使い方&日本語対応webフォントまとめ | Web制作会社スタイル

contenteditable=contenteditable – コンテンツの編集許可
ブラウザ上でテキストを編集できるようにする指定。

text-rendering: optimizeLegibility · terkel.jp
テキストのカーニングを調整してくれる指定だそうで、これが指定されているということはフォント・SVGにカーニングや合字のデータが付随しているということでしょうか。

 


現在、ローカルテスト環境で自分のサイトに合うかどうかテストしてますので、実際に適用するかはまた決めたいと思います。いまのOpen Sansもいいのですが、手書きフォントが好きなので、できるならLightあたりの軽さで使っていければと思います。

ちなみに上記サイト内「ブログを作ろう」的な項目で、CMSとしてWordPressが紹介されていたので、すこし安心感(?)のようなものを感じてしまいました。

WordPress、数年前からお世話になっていますがこれからも利用者が増えてくれるといいなぁと思います。

 949 Views