フォントの選び方はこちらから 使用するフォントが決まったら、ウェブページに読み込む設">
CamaradeCamarade
2016/02/04

No.2 GoogleFonts を使用する

この記事は約2分で読めます。

No.2 GoogleFonts を使用する

Googleデザイン

フォントの選び方はこちらから

 

使用するフォントが決まったら、ウェブページに読み込む設定をしましょう。

使用するフォントの下の緑枠の部分をクリックします。

 

googlefonts_use01

使用するウェイトを選択

Choose the styles you wantで使用するウェイトを選びます。使用する予定のないウェイトは選択しないようにし、サイトの表示に時間がなるべくかからないようにします。

googlefonts_use02

欲張って、ウェイトの数を増やすと読み込みに時間がかかります。

googlefonts_use03

文字の種類を選択

Choose the character sets you wantでは文字の種類を選択します。ギリシャ語や特別な言語を使用しないのであれば、英語アルファベット・数字・記号が含まれた「Latin」を選択します。

googlefont_22

フォントを読み込む方法を選ぶ

Add this code to your websiteの欄に、選択したフォントを読み込むためのコードが表示されます。読込方法別にタブで分かれていますので、任意の読込方法のタブをクリックして、ページにフォントを読み込ませます。

googlefonts_use04

フォントを適用させる

フォントを適用させるために、font-familyを追加します。

googlefonts_use05

次に、適用させたいセレクタにフォントを指定します。

下のように設定するとbody直下のpに読み込んだフォントが適用されます。

body > p {    font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。