こんにちは！
Webサイト制作でフリーランスとして活動している「はやた」と申します。
今回は僕がWeb制作の勉強を初めて、よくわからなかった部分「Webフォント」と「font-family」について解説していきます！
プログラミング学習中の方は読んでみてください！
font-familyとはなんなのか
Webフォントの説明をする前に、まずfont-familyの説明をしなくてはなりません。
font-familyは簡単です！
Webサイトを開いたときに、表示するフォントを指定するものが、font-familyです。
例えば、Macで使用されるヒラギノ角ゴシックを指定したい場合には、該当する箇所のCSSに、こんな感じで指定ができます。
font-family: 'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
ちなみにfont-familyは前から順番に適用されるので、複数指定をしておけばそのフォントが使用できなかった場合に、次のフォントで表示させることが可能です。
フォントを指定するって簡単に聞こえますが、フォント名をいちいち検索する必要があったり、名前を間違えてしまったり、表きが複数あったりと結構めんどいです。
そこでサルワカさんのこのサイト！
Font-familyメーカーを使えば選択してコピペするだけです１
https://saruwakakun.com/font-family
ミスを少なくするためにも、利用してみてください。
font-familyの問題
先ほど、「font-familyは前から順番に適用されるので、複数指定をしておけばそのフォントが使用できなかった場合に、次のフォントで表示させることが可能」と書きました。
これは裏を返すと、そのWebサイトを見た人のパソコンの中に、使って欲しいフォントが入っていなかった場合は表示されません。
作成者ではなく、閲覧者のPCにフォントがインストールされている必要があります。
指定したフォントがなかった場合は、ブラウザ規定のフォントとなるので注意が必要です。
それでは、どうやったら指定したフォントでWebサイトを見てもらえるのでしょうか？
そこで登場するのがWebフォントです！
Webフォントの使い方を解説！
フォントはWebサイトのデザインに欠かせないパーツの一部です。
そのフォントが意図しないもので表示されてしまい、Webサイトが崩れてしまうのはとても悲しいことです。
それを防ぐため、Webエンジニア・コーダーはWebフォントを使いこなす必要があります！
Webフォントとは
Webフォントとは、あらかじめサーバーにフォントデータを置いておく、もしくはインターネット上で提供されているフォントを呼び出すことで、閲覧者のPCにフォントがインストールされていなくても、該当するフォントを読み込むことができるというものです。
つまりサーバー上からフォントデータを読み込めるので、PCにインストールされてなくてもOKということです！
スマホやタブレットでWebサイトを見る時代なので、それぞれに一括で対応できるのもメリットの一つです！
まずはGoogle Fontsを使ってみよう
Google Fontsは無料で使えるフォントサービスの一つです。
名前の通り、Googleが運営しており手順がめちゃくちゃ簡単です。
何かフォントを探すときには、まずここから探すのがいいでしょう。
Google Fontsの使い方
まずはGoogle Fontsにアクセスしてください
この画面がうつるので、検索窓に導入したいfont名を入れます。
今回は、「Noyo Serif」で検索しました！
該当するフォントが出てくるので、必要なフォントをクリックしてください！
こんな感じの画面になるので、必要な太さを選び右側の「Select this style」をクリックしましょう。
すると、「＋」マークが「ー」マークに変わります。
これでオッケーです！
選んだフォントが追加されています。
選び終わったら、まず<link>を貼ります。
画像の部分をコピーして、<head>内にコピペしましょう！
最後に、その下のfont-familyをコピーして、該当箇所のCSSに書き込んでください。
サイト全体に反映させるのであれば、bodyに追加するのがおすすめです！
簡単でしたよね！！
Google Fontsはまず初めにフォントを探す場所になるので、しっかりブックマークしておいてください！
Google Fontsになければ、Adobe Fontsを使おう
Google Fontsを探したけど、該当するフォントがなかったなんてことは結構あります。
次に探すのがAdobe Fontsです。
無料で使えるのですが、Adobeへの登録が必要です。
無料登録で6000フォントが利用できます。
Adobe Fontsに使い方
まずはAdobe Fontsへアクセスしてください。
上部の検索窓から、フォント名を検索します。
今回は「DNP」と検索してみました！
すると、画像の4つが該当しました。
探しているフォントをクリックしてください。
するとこんな画面になるので、欲しい太さをアクティベートしましょう。
ディアクティベートと出て、スイッチが青くなっていたらOKです。
アクティベートが終わったら、上部にある「Webプロジェクトに追加」をクリックしましょう！
次にプロジェクトに追加をしていきます。
初めて使うのであれば、赤い四角の中にプロジェクト名を入れます。
今回は「サンプル」としましたが、なんでもOKです！
入力を終えたら下の作成をクリック。
すると、Google Fontsの時のような、コードが出てきます。
上の赤い部分は<head>内にコピペ
下の青い部分はCSSなので、該当する箇所へ書き込みましょう！
Adobe Fontsもこれでオッケーです！
登録する作業がありますが、簡単ですよね？
まずは使ってみてください！
ちなみにアクティベートしておけば、PhotoshopやIllustratorなどのadobe製品にも適用されます！
Adobe Fontの問題点
Google Fontsにもないフォントを利用できるAdobe Fontですが、一つ問題点があります。
Adobe Fontのアカウントを解約すると、登録してあるWebフォントは使えなくなります。
例えば、コーダーの人が自分のアカウントでAdobe Fontを利用したとします。
何年か後に、コーダーを引退するので、アカウントを解約しました。
するとそのコーダーのアカウントで設定したAdobe Fontは全て使用（表示）できなくなります。
これ結構問題ありますよね、、、
この問題を解決するには、クライアント側でAdobeに登録してもらうしかないのですが、フォントへの理解がどれだけクライアント側にあるかわかりませんし、難しい問題ですね。
とりあえず無料アカウントでも、ずっと残しておくしかなさそうです。
Webフォントとfont-familyのまとめ
Webフォントとfont-familyについて理解していただけましたでしょうか！
初めはややこしいと思いますが、理解すれば流れ作業で設定できます。
練習で一度やってみてください！
それでは、読んでいただきましてありがとうございました！
-
-
フリーランスになるなら「Kindle Unlimited」に加入せよ！情報収集にめっちゃ役立つ！
こんにちは！ Web制作でフリーランスとして働いているはやたと申します！ 今回は、「Kindle Unlimited（キンドルアンリミテッド）」について話していきたいと思います！ みなさんKindle ...