Web Fonts を利用すると、ブラウザに表示するフォントをこちらで決めて表示させてあげる事ができます。
制作者側が狙った、fontでみてもらうことが出来ればイメージが崩れること無く見てもらえるので非常に効果が大きいと期待しています。
google の Google Web Fontsは、無料 で提供されているので、チェックは必修です。
使ってみたサンプルはこちら。
Google Web Fonts へアクセスします。Open Source Fonts なので、ログインや認証も不要で利用可能なようです。
【Start choosing fonts】のボタンを押します。
現時点で466個のフォントが利用できるようです。ちなみに日本語のフォントは無いようでした。
サンプルから、フォントを探します。気に入ったのがあれば、【Add to Collection】のボタンを押します。
コレクションに加わります。【Review】ボタンを押します。
選択したものが確認できます。【Use】ボタンを押します。
1.選んだフォントが表示されます。
ロードするのにかかる時間の目安がメーターで表示されます。
2.キャラクターのオプションが選べます。選択すると、当然容量が増えてダウンロードに時間がかかるようになります。
3.適用方法は、3種類のコードが用意されています。
リンクダグの方法
CSSファイルから読み込む方法
Javascriptを使う方法
どれかをコピペで選びます。
4.CSSへの記述方法も出ていますので、これもコピぺして使います。
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Parisienne&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Parisienne', cursive;
font-size: 48px;
}
</style>
<title>Google webfont のサンプル</title>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
という感じになります。
実際に適用してみた表示サンプルは更にもう一つフォントを選んでみてあります。
コメント
[…] Google Web Fonts にはない日本語文字もあるということですね。 また、「もじdeパ […]