制作実績お見積フォームHTMLWordPressEC累計コーディング数:14685ページホーム>Web制作>Webフォントの特徴と使い方Webフォントの特徴と使い方Web制作2016年05月06日Web制作ではフォントを活用することは欠かせませんが、その中でも最近脚光を浴びているのがWebフォントです。その名の通り、ネットを介してフォント情報を取得、利用する方法です。便利な一方でデメリットもあるので、うまく使っていくことが求められます。本記事では、Webフォントの特徴と使い方についてご紹介します。Webフォントのメリットやデメリットについてもご紹介しているので、導入を検討している方の参考になればと思います。Webフォントの基礎知識Webフォントとは?Webフォントとは、CSS3から導入された新しい機能のこと。インターネットを介してフォント情報を読み込み、ページを表示します。従来のインストール型のフォントとは異なり、ユーザー環境に依存しないことが特徴です。ネット環境さえあれば、いつでも意図通りのフォントでページが表示できます。最近では日本語で使えるWebフォントが増えてきましたし、使えるシーンも増えてきたと言えるでしょう。WebフォントのメリットとデメリットWebフォントのメリットとデメリットについてまとめておきましょう。メリットWebフォントはこれまでのフォントとは異なり、インストールの必要がありません。ネット環境が整っていれば、必ず意図通りのデザインでフォントが表示されるのです。これが、Webフォントの最大のメリット。ユーザー環境に依存せず、いつでも正しいデザインでページが表示されます。従来は、意図しないフォントで表示されてしまうことを割けるために、画像にテキストを入れる方法もとられてきました。画像を使うことでフォント崩れはなくなるのですが、その分データ量が多くなり、ページの表示に時間がかかってしまう問題がありました。Webフォントを導入することでこういった画像が減らせるため、ページのロード時間の改善も期待できます。画像からテキストに代わることで、SEO面でも有利になります。デメリットページを表示するとき、Webフォントを使っているとフォント情報を読み込むことになります。これが原因で、表示に時間がかかってしまうことも考えられます。通信回線も進歩していますし、Webフォントを適用する場所を絞ることでもページ速度の遅延は防ぐことができます。Webフォントの使い方Webフォントの使い方です。Googleフォントを例に、使い方を見ていきましょう。GoogleフォントGoogleフォントをひらき、使用するWebフォントを決めます。「Use」を押して、コレクションに追加してください。website:」からWebフォントを読み込むためのパスをコピー、CSSファイルにペーストします。url(https://fonts.googleapis.com/css?family=Open+Sans);HTMLに直接書き込む場合は、下記のようにペーストします。type='text/css'>最後に、CSSのfont-familyにWebフォントを指定すれば完了です。sans-serif;あとは、Webフォントを適用させたいHTML要素を随時指定していってください。あとがきWebフォントも、通常のフォントと同様に著作権は発生しています。利用する時は、著作権の確認も忘れずに行うようにしましょう。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。