Google Fontsとは？

無料でフォントを使用できるサービスです。
Webサーバーからフォントデータを読み込んで、サイトに表示させていきます。
Webフォントを使えば、フォントのデータをサーバーから読み込むため、どの端末でも同じフォントを表示させることができます。
便利だからと言って使用するフォント種類を増やしてしまうと動作が遅くなります。ご利用は計画的に
日本語のフォントも少しだけ用意されていますが、まだまだ少ないです。英字フォントはたくさんありますので積極的に使ってみましょう

Google Fontsを使ってみる

まずはGoogle Fontsのページに行ってみましょう 検索エンジンで知らべればすぐでてきます。

こんなページが表示されます

使いたいフォントを探す

一覧の中から使いたいフォントを探して、使いたいフォントが見つかったら「＋」ボタンをクリックしてみましょう
ブラウザ下部に何か黒いバーのようなものが出てくると思います。
これをクリックすると何やらいろいろ書かれたウィンドウがでてきますのでこの中に表示されているコードに注目してみましょう

フォントデータを読み込む

まずは真ん中あたりにある「link要素」を使います
link要素はフォントのデータを読み込むために必要なものなのでコード全てをドラッグしてコピーしましょう。
張り付ける場所はHTMLファイルのhead要素内になります。
ご自身で作っていいるcssファイルよりも前に読み込まれるように張り付けてあげましょう。
ネットにつながっている環境であればこれでGoogle Fontsを使う準備は完了です。

CSSでフォントの設定をする

次は今コピーしたコードの少し下「Specify in CSS」のところにある「font-family」の記述を見てみましょう
font-familyはフォントを設定するためのプロパティです
このfont-familyをコピーし変えたい要素のセレクタの中に張り付けましょうこれで自分で選んだフォントをwebサイトに表示することができるようになります
かなりお手軽なので試してみましょう。他とは少し違った表現ができるかもしれません。