投稿日:

GOOGLE WEBフォントの使い方

欧文フォント限定となりますが、備忘録的にも記事にしておこうと思います。

まずはこちらのページへアクセスします。
https://fonts.google.com/

使いたいフォントを選びます。

フォントの右上のバーにあるプラスをクリックします。

そうするとウインドウの最下部に黒いバーが出現します。

黒いバーの右の「ー」をクリックするとウインドウが表示されますので書いてある内容をご覧ください。

 

1下記のどちらかのソースをコピペする。

HTMLにソースをコピペする場合
STANDARDをクリックし表示されたソースをコピペしてください。

cssにソースをコピペする場合
@IMPORTのをクリックし表示されたソースをコピペしてください。

ちなみにこの箇所では、googleのフォントが格納されているサーバに、指定のフォントをとりにいく宣言をしています。

2使いたいクラスのフォントをあてる

Specify in CSSの下部に記載されているソースを使いたいクラスに当ててください。

例えばh2の見出しでしたら

h2{
font-family:〜〜〜〜(コピペ)〜〜〜;
}

という感じにコピペします。

クラスの中に使用せずに、直接コピペしても動かないので注意しましょう。

手順は以上です。
実際に適応されているか確認してみましょう。

また追記、記載していきます。