皆さんはウェブフォントというものをご存じでしょうか？
通常フォントというのはPCにインストールされているものしか利用できないのですが、このウェブフォントというものを使用すると、PCにインストールされている、されていないに関わらず、新しいフォントを適用できるのです。
…と説明しても、専門知識が無い方には難しいお話しですね。
なので、今回はウェブフォントの設定方法についてご紹介していきますが、ある程度CSS、特にCSS3に対しての知識がある方に読んでいただきたい記事となっております。お分かりになる方はぜひご活用いただければと思います。
ウェブフォントの設定方法
このカスタマイズをする前に注意して頂きたいのが、ウェブフォントを設定する際には、フォントデータを置くサーバが必要となります。
ホームページをお持ちの方でしたらサーバは取得済みでしょうからそちらをご使用ください。もし、お持ちでない場合は『さくらのレンタルサーバ』などから低料金で取得できますので、ご利用になられてみてください。
1.ウェブフォントとして使用可能なフォントを探す。
フォントにもライセンスがあり、勝手にウェブフォントとして使用する事ができません。しかし、中にはフリーでフォントを配布している方もいらっしゃいます。いくつかご紹介しますね。
※記事更新前にライセンスについて確認はしましたが、もしかしたら将来的に有料となる場合もあります。ご利用前にライセンスに関してしっかりご確認ください。
2.さまざまな形式のフォントを用意する。
『Font Squirrel』
こちらのサイトを利用してさまざまな形式のフォントを用意します。これによりどのブラウザで見てもそのフォントが表示されるようになります。
上記サイトを利用すると、フォントデータのみならず設置する際のためのCSSコードも付いてきますのでとても便利です。
3.フォントデータをサーバにアップロードする。
ファイル名を分かりやすい名前に変更し、そのファイルをアップロードします。
4.CSSを記述する。
記述するのは２つです。フォントを適用するためのコードと、そのフォントをどこに適用するのかを指定するコードです。
（例）ふい字の場合。
【CSSコード1】
@font-face {
font-family: 'Huifont';
src: url('huifont109-webfont.eot');/* ※ */
src: url('huifont109-webfont.eot?iefix') format('eot'),/* ※ */
url('huifont109-webfont.woff') format('woff'),/* ※ */
url('huifont109-webfont.ttf') format('truetype'),/* ※ */
url('huifont109-webfont.svg#webfontutPFeEkq') format('svg');/* ※ */
font-weight: normal;
font-style: normal;
}
※『url()』の括弧内にはhttp://から始まるフルパスを記入してください。
例(http://yourdomain.com/Huifont/huifont109-webfont.eot)
【CSSコード2】
body {
font-family: 'Huifont'
※これはブログ全体に設定するようになります。部分的に設定したい場合には『body』を『main』や『entry』などお好みに変更してみてください。
以上です。
『Font Squirrel』というサイトを使用すれば必要なデータを自動で作成してくれるのでかなり簡単に設定できるようになります。
しかし、日本語フォントはうまく変換されないみたいです（汗。
-This is Webfont!!
これにもウェブフォントを適用しているのですが…日本語はだめですね（汗。-
今後日本語フォントも適用できる方法を探してご紹介しますので、それまでお楽しみに。
では、また書きます。
簡単に記事をデザインするCSS&HTMLテクニック
読みやすいフォント設定を公開してみました
やってはいけない５つのフォント設定とは？
白背景色に適したフォント設定