CamaradeCamarade
2016/02/03

No.1 GoogleFonts とは

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

No.1 GoogleFonts とは

Googleデザイン

Google Fontsは、好みのフォントをウェブサイトに簡単に適用させることのできる便利なツールです。

 

google fonts(グーグルフォント)

https://www.google.com/fonts

 

Google Fontsには、たくさんのフォントが用意されています。
数あるフォントから、今回は使用したいフォントを絞っていく方法をご紹介します。

 

 

フォントのカテゴリを選ぶ

左にあるツールバーのFilters:の下にあるプルダウンメニューからフォントのカテゴリを選択することができます。

最初はすべてのカテゴリが選択されています。

このチェックボックスに、使用したいフォントのカテゴリにチェックを入れて絞ります。

googlefont_03

●Serifを選択

googlefont_04

・Monospaceを選択

googlefont_05

フォントの太さを調整する

フォントの太さは、ツールバーのThicnessの項目から変更することができます。

左の( thin ) にドラッグすると細いフォントを選択し、右 ( thick ) にドラッグすると太いフォントを選択します。

googlefont_06

・thin にドラッグした場合

googlefont_07

斜体を調整する

フォントの斜体調整は、ツールバーのSlant項目から調整することができます。

googlefont_08

左の( Straight) にドラッグすると正体を選択し、右 ( slanted ) にドラッグすると斜体を選択します。

下のキャプチャは正体 ( Straight ) を選択した場合です。

googlefont_10

こちらは斜体 ( Slanted )  を選択した場合。

googlefont_09

フォントの幅を調整する

フォントの幅の調整は、ツールバーのWidth項目から調整することができます。

googlefont_11

左の( narrow) にドラッグすると幅の狭いフォントを選択し、右 ( wide ) にドラッグすると幅の広いフォントを選択します。

下のキャプチャは 幅の狭いフォントを選択した場合です。

googlefont_13

こちらは 幅の広いフォントを選択した場合。

googlefont_12

 

文字を選択する

一般的なウェブサイトで使用する可能性があるアルファベットはLatinですが、GoogleFontsにはLatinに加えて、数種類あります。

左のツールバーから選択することができます。

 

googlefont_14

・ギリシャ語を選択

googlefont_15

・ベンガル語

googlefont_16

 

 

このように、GoogleFontsはフリーでたくさんのフォントを用意しています。

お探しのフォントも見つかるかもしれません。

一覧へ戻る

私たちについて

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