クリエイター:コーディング備忘録ブログ

コーディング

Google web fontsを使う

通常webサイトでフォントを指定しても
ユーザーのPC内にあるフォントしか再現されないので
使いたいフォントがあると画像で対処したりするのですが

webフォントを使うとフォントデータがweb上に存在するので
ユーザーの環境によって表示が左右される事はありません。

その中で今回はGoogleが提供しているGoogle web fontsを使いたいと思います。

まず導入
Google web fontsにアクセスします。
https://www.google.com/fonts
google1

使いたいフォントを見つけたらQuick-useを選択します。
google2

「3. Add this code to your website」standardタブ内にあるコードをhead内にコピーします。
google3

次に「4. Integrate the fonts into your CSS:」内のコードを適応したい任意のcssにコピーすると表示されるようになります。
google4

下記がフォントを適応した場合です。

markup

これで完成です。

Google web fontsは2016年6月現在779種類公開されているので
webサイトを作る毎に変えていっても早々困る事はないでしょう。

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP