Web・デザイン

美しい文字 「Google Web Fonts」「Adobe Web Fonts」及 @font-face で Webフォント 

Webサイトでは、今まで通常、文字を画像にしたり、ブラウザで用意されているフォントを指定して表示してきました。
しかしながら近年では、サーバー上におかれたフォントやネットワーク上で提供されているフォントファイルを呼び込みあるいは呼び出しして
文字を表示するWebフォントが主流になりつつあります。
ブラウザが用意しているフォントはそれぞれの環境によりまちまちで、指定するフォントがなければ別のフォントが代用されてしまい、意図しない表現となってしまったリます。
よく、画像に文字を埋め込んだ利した場合は文字を選択できなかったりします。また、SEO効果という点から考え、デザイン性の高いWebフォントを効果的に使うことが得策と思われます。

参考:ここに表示した文字は 「Google Webフォント M PLUS 1p」 で表示しています。

インターネット上で提供されているWebフォントで有名なサイトでは 「Google Fonts」 及 「Adobe Fonts」 があります。 「Google Fonts」 はフリーで利用できますが、「Adobe Fonts」は「Creative Cloud」にて提供されているため有料となります。 CSS3では 「 @font-face 」 という機能で fontファイル(ttfファイル)をサーバー上におき Webフォントを表示する方法があります。
(注意: フォントによっては、ライセンスがあので注意が必要です。)
ここで、「Google Fonts」 「Adobe Fonts」及「 @font-face 」を使って文字を表示してみます。

「Google Fonts」

Google Fonts 日本語Webフォント
Google Fonts の使い方や利用方法

赤い炎が尖った翼の輪郭を浮かび上がらせた。

「Adobe Fonts」

Adobe Fonts
Web サイトへのフォントの追加
「Adobe Fonts」 日本語Webフォント VDL 京千社 R

視覚デザイン研究所 (VDL) は、文字の持つ伝統的な美しさを損なうことなく、斬新でありながらも「造形の美的バランス」と「文字の可読性」この両立をコンセプトとした、新しい表情の日本語フォントを創出しています

@font-face

フォントファイルを直接ダウンロードしてきて、自分で後悔するサーバーに保存します。
そのファイルを CSS3 の機能である @font-face でインクルードします。
詳細はMDNなどのドキュメントを参照してください。
@font-face (MDN web docs)

CSS
HTML

FontName: Open Sans
@font-face

FontName: Lobster
It’s Beautifl Fonts!

最近の記事

  1. EC-CUBE 4.0 インストール
  1. プログラミング

    画像をポップアップするライトボックス jQuery プラグイン 「lightb…
  2. Web・デザイン

    CSS3 機能 セレクタ、target擬似クラス、構造擬似クラスについて学ぶ
  3. プログラミング

    Django Webアプリケーションの構築 デザイン要素としてbootstrap…
  4. 趣味・実用

    vim テキストエディターを快適に使う
  5. プログラミング

    ワードプレス上で可変的にグリッドレイアウトを行うjQueryプラグイン「vGri…
PAGE TOP