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 の使い方や利用方法
1 2 3 4 5 6 7 8 |
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:800&display=swap" rel="stylesheet"> <style> .NotoSerif { font-family: 'Noto Serif JP', serif; font-size: xx-large; } </style> |
赤い炎が尖った翼の輪郭を浮かび上がらせた。
「Adobe Fonts」
Adobe Fonts
Web サイトへのフォントの追加
「Adobe Fonts」 日本語Webフォント VDL 京千社 R
視覚デザイン研究所 (VDL) は、文字の持つ伝統的な美しさを損なうことなく、斬新でありながらも「造形の美的バランス」と「文字の可読性」この両立をコンセプトとした、新しい表情の日本語フォントを創出しています
@font-face
フォントファイルを直接ダウンロードしてきて、自分で後悔するサーバーに保存します。
そのファイルを CSS3 の機能である @font-face でインクルードします。
詳細はMDNなどのドキュメントを参照してください。
@font-face (MDN web docs)
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// @font-face の使い方 //スタイルシートでダウンロードしてきたフォントファイルをサーバー上にアップロードして //そのファイルをインクルードします。 @font-face { font-family: 'myFont'; src: url('[サーバー上のパス]/OpenSans-ExtraBoldItalic.ttf'); } p.style1{ font-family: 'myFont'; font-size:45px; } |
HTML
1 2 3 4 5 6 7 |
// HTMLソース <p class="style1"> FontName: Open Sans<br> @font-face </p> |
FontName: Open Sans
@font-face
FontName: Lobster
It’s Beautifl Fonts!