2016年9月12日
Google ロゴのGifアニメが削除されましたので、記事内からも削除しました。

Google のロゴがサンセリフ体になりました。

Googleを活用されてる方ならもうお気付きかも知れませんが、こちらはモバイル環境を意識した変更のようですね。
日本のWebサイトでは明朝体の視認性は下がり、ゴシック体が活用されている歴史がありますが、画面の小さいスマートフォンの普及によって、モバイル環境でも同じことが言えます。

現在ではWebフォントもあり、セリフ体、サンセリフ体などの表現の幅がグッと広がっています。

そんなWebフォントは簡単に実装することができるので、是非チャレンジしてくださいね。

@font-faceでフォントファイルを指定 (CSS3)

CSS3から登場した、@font-faceを使ってフォントファイルを読み込みます。
フォントファイルはサーバー内にアップロードすると相対パスでも指定できますが、荘でない場合は絶対パスになります。
また、Google Web Fontsを初めとしたWebフォントのサービスでは、フォントを選ぶとCSSを提供してくれる場合がありますので、その場合はそちらを読み込ませるだけです。

/* IE */
@font-face{
font-family: フォント名;
src: url(パス);
}
/* Firefox, Opera, Safari */
@font-face{
font-family: フォント名;
src: url(パス) format('truetype');
}

要素にWebフォントを適応させる

先ほどのCSSの記述を読み込ませた後に、下記の記述をします。

h1{
font-family: フォント名;
}

以上で終わりです。
こんなに簡単に指定でき、普段とは違うフォントの表現ができるので、活用してみましょう！