webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

Google Fonts の使い方

f:id:yachin29:20180313131112p:plain



Webフォントとは?


元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォントのメリット
ユーザーの環境に依存せず、意図したデザインで表示できる。
フォントデータはベクター形式の為、様々な解像度に対応出来る。
テキストデータの為、Googleクローラーが認識しやすくなる。
などが上げられます。


Webフォントのデメリット
読み込みに時間がかかる。特に日本語の場合は注意が必要。
Webフォントには主に2種類の使い方がある
GoogleFontsのようなネット上にあるWebフォントサービスを使う方法と、自身の持っているフォントデータをhtmlファイル等と一緒にアップロードし、表示させる方法があります。

Google Fonts


fonts.google.com



GoogleFontsの使い方は非常に簡単で
1、まずは使いたいFontを選び、「Quick Use」ボタンを押す。
2、使用したいFont-weightやFont-styleにチェックを入れる

3、出力されたソースをHTMLに挿入する

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>


複数のフォントを使用する場合、フォント名とフォント名の間に|を入れましょう。

<link href='https://fonts.googleapis.com/css?family=Bangers|Ubuntu' rel='stylesheet'>

4、WebFontを使用したいタグにCSSで「font-family」を指定する。

font-family: 'Open Sans', sans-serif;


日本語のGoogle Fonts もありますが、まだテスト段階なので、使用するには注意が必要です。

googlefonts.github.io