こんにちは！ウェブ担当のニシウラです。
猛暑になったり豪雨になったりと天候の変化が激しい毎日ですが、いかがお過ごしでしょうか。
MMP内の変化としては、最近PCの環境がデスクトップからノートに移行しました。
ノートPCは省スペースさと機動力がいい点が魅力ですが、作業中に急に動き出すファンの音の大きさと本体の熱さに日々ヒヤヒヤしています。
さて、今回はウェブサイトの印象を大きく左右する（であろう）フォントについて書きたいと思います！
思ってたのとなんか違う、フォント問題
いきなりこんな見出しですが、あなたはウェブサイト上で表示されるフォントの見た目の違いがわかりますか？
例えば「ゴシック体」と一口に言っても、游ゴシックだったりヒラギノ角ゴシック体だったりとフォントにも色々な形があり、それによってサイトの印象も大きく変わってきます。
フォントの指定はCSSに記述することで反映されますが、PC・スマホ・OSの種類を問わずどの媒体でも同じ見え方にしたい場合は、同じフォントを指定しなければいけません。
でもOS標準搭載のフォントにはMacとWindowsでもバラつきがありますし、意図しない表示になったりもするんですよね…
こういった印象のズレを防ぐ方法としては、以下のようなものがあります。
- 画像で書き出す
- MacでもWindowsでも表示できるOSフォントを指定する（游ゴシックとか）
- Webフォントを利用する
①は全文ではなく見出し程度の使用だったら問題ないと思いますが、SEO対策も兼ねてできればテキストにしたいところ…。
なので今回は③の方法で進めていきます。
Webフォントでサイトの印象を統一
どの環境でも同じフォントで表示させる方法として、オススメはWebフォントを使用することです。
Webフォントの導入には、自分のサーバー上にフォントファイルをアップロードして使用するものと、他サイトで提供されているフォントをコードを貼り付けるだけで利用できるものの2通りありますが、ここでは後者の方に触れたいと思います。
Google Fonts（無償）
Googleが提供しているWebフォントサービスです。
無料で使用できるものとしては最も有名なサービスで、2022年7月13日の時点で計1430種類のフォントが提供されています。
当初は英語フォントが主でしたが、日本語フォントも続々ラインナップされています。
ベーシックなフォントから個性的なデザインフォントまで用意されているので、デザインの幅が広がりますね！
Adobe Fonts（有償）
Adobeが提供しているフォントサービスです。
使用するにはサブスクの契約が必要になりますが、Webに限らずDTPなどでも共通で使用できるので、デザイナーには必須のサービスと言えますね。
2022年7月13日の時点で計2831種類のフォントが提供されています。
なお、クライアントに制作依頼されたサイトを公開する際は、デザイナー自身ではなくクライアント側がアカウントを所持している必要がありますので、その点は注意が必要です。
最後に
いかがでしたか？
ちなみにMMPのサイトは、標準フォントかつWindowsでもMacでも比較的差異がなく表示されるものとして「游ゴシック」を優先指定しています。（上であげた②の方法ですね）
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;昔と違ってテキストにも個性的なフォントを使えるようになったので、楽しみが広がりましたね！
それでは、素敵なフォントライフをお過ごしください！
