あれ?明朝体にしてたのにスマホで見たらゴシックに変わってるのなんで?こんなことありませんか?実はWEBで表現できるフォントには特徴があります。今回はその特徴をざざっとご紹介していきます!WEBのフォントってそもそもどういう仕組で表現されるものなのか?基本的にWEBで表現できるフォントは決まっています。表示されるのはCSSに記述した指定フォントです。その指定したフォントをすべてのデバイス、環境で見れるか、というと、そうではありません。指定した中でさらにWebブラウザ側で各端末にインストールされているフォントを呼び出し文字を表示させます。指定したフォントがデバイスにインスト-ルされていなければ、そのフォントでは表示されず、デバイスにインストールされているデフォルトのフォントが表示される仕組みになっています。基本的には特殊なフォントは指定せず、もともとのデバイスにデフォルトで登録されているフォントを選択してデザインを行うことが多いです。ヒラギノ角ゴ、游ゴシックなどなど。問題ないですが、テキスト構築の箇所が今回の事例に該当します。(ドラッグで反転できる部分ですね)表示例はこんな感じ。別のフォントが代用されてしまい、作成者が意図しない見え方になってしまうのです。ほとんどのフォントが使えないのか・・・いや、まって!せっかくかっこよくデザインしても、見れないんじゃ意味がないですよね。通常、各デバイスから表示させていたフォントをデバイスからではなく、サーバー上に保管されているデータから呼び出し、表示させる仕組みです。表示させたいフォントを呼び出すことが可能になります。WEBフォントとして使用できるフォントに限りますが、どのデバイスで見たときも同じフォントで見れるという驚きの方法。文字の修正が画像化したテキストに比べ、ラクに行なえます。デザインしたワークファイルを共有したり開いたりしなくても、コードでの修正が可能です。読み上げ・翻訳機能にも対応できるといった利点があります。SEOの点から見ても、画像に組み込まれたテキストは認識されませんが、テキスト構築としてコーディングされているので、認識されます!ただ、WEBフォントにもデメリットがあります。WEBフォントのデメリット・日本語フォントは表示に時間がかかる場合がある欧文フォントと比べて文字数の多い日本語フォントは読み込みに時間がかかり、サイトを閲覧する上で若干のストレスを抱えてしまう場合があります。(以前に比べると、様々な技術や方法でだいぶ早く表示されるようになりました。)昨今、通信スピードは格段に早くなり、WEBフォントの表示速度も早くなってはいますが、3G回線など通信環境によっては通常よりも読み込みに時間がかかるかもしれません。・ランニングコストがかかる場合があるこちらも欧文フォントはフリーで利用できるものがかなりの数存在しますが、問題は日本語フォント。日本語のWEBフォントはその大多数が有料となっています。予算をフォントに割ける場合は問題ありませんが、ネックになる可能性は無きにしもあらず。閲覧数によって変わる料金体系もありますので注意が必要です。欧文フォントに比べて文字数が膨大なのでなかなか普及が難しいようです。Fontを活用してみてください。大体のものはまかなえるかと思います。日本語のフォントも試験的にではありますが少し公開されていますので一度確認してみてください。https://fonts.google.com/使用したいフォントを選んで、コードをコピー、HTMLやCSSに貼り付けて指定してあげるだけ!何これかんたん...詳しい使用方法はgoogle先生に聞いてみてください。すっごいわかりやすい記事がいっぱい出てきてニッコリできます。私がよく使う方法としては、タイトル部分など、英語でデザインするときはその部分にだけwebフォントを指定し、イメージづくりを行うことが多いです。これだけでデザイン性がすっごく出るから不思議。さいごにさて、いかがでしたでしょうか?サイトのちょっとした印象で差をつけることができるWEBフォント。欧文であれば表示速度の問題もラクにクリアできるかと思います。メリットもたくさんあるので、この機会に、是非活用してみてください。LINE株式会社TAISHO-ficプロジェクトチームお仕事のご依頼・ご相談など、お気軽にお問い合わせください。USPREVBACKNEXTOTHERCOLUMNWEBその他SSLとは?対策は今後必要なのか徹底解説!皆さまがお持ちのウェブサイト。...WEBその他カップラーメンを紹介しています!そうなんです。その1みなさま、こんにちは!どうもSUEです。...お仕事のご相談や、弊社についてのご質問やご要望など、お気軽にお問い合わせください。ワイラボ【WhyLabo。