浜村拓夫(・∀・)作品集

頭の中にあるイメージを表現できるデザイン力が欲しいです(><)

Google Fontsの使い方

かわいいフォントを使っているWebサイトがありました。

Sidr - A jQuery plugin for creating side menus

 

どうやって表示しているのか?を調べたら、Google Fontsを使っていました。

WebFontConfig = {
  google: { families: [ 'Ranchers', 'Capriola' ] }
};

 

Google Fonts

 

●Ranchers

Google Fonts Ranchers

Ranchers
Impallari Type
SIL Open Font License, 1.1
Ranchers is one of the many hand-lettering artists' relaxed interpretations of sans serif type, typical of the 1950s. It's great for big posters and fun headlines. Use it bigger than 40px for maximum effect.

 

フォントファイルのダウンロード

www.1001freefonts.com

 

●Capriola

Google Fonts Capriola

Capriola
Viktoriya Grabowska
SIL Open Font License, 1.1
Capriola is a sans-serif typeface whose unique style draws upon forms seen in handwriting and italic types. Skeletons of the most characteristic glyphs are inspired by quick handwriting and based on a single hand movement (G,a,g,k,e). Capriola ambitiously seeks to push the boundaries of originality in the genre without losing legibility.

 

 フォントファイルのダウンロード

www.1001freefonts.com

 

●サンプル

 

f:id:hamamuratakuo:20151102051711p:plain

 

Capriolaのくるくるしたかんじの線がいいですね!

Ranchersは漫画チックなタイトル文字とかに使えそう。

 

●Web Fontとは?

Google Fontsのような、Webフォントは、CSS3から使えるようになりました。

Webフォント - Wikipedia

WebフォントはWWW上からフォントを表示する技術である。HTMLにおけるフォントのダウンロードはCSS3.0 fonts moduleにて内包された。

 

問題点
ブラウザー側で「ウェブサイトで指定したフォントを使用しない」設定を有効にしたり、ユーザースタイルシートを使用している場合、アイコンが表示されなくなる場合がある。

 

「アイコンフォント」といって、記号やマークもWebフォントとして提供できるのだけれど、上記の問題点のように、Webフォントを表示できない環境では使えないので、デザイン上は注意する必要があるみたいです。

 

Google Fontsの使い方

www.hp-stylelink.com

 

Webフォント「Google web fonts」の使い方・実装手順メモ | OZPAの表4

 

(1) Google Fontsを選定する。

(2) Google Fontsを呼び出すCSSを記述する。

(3) CSSでfont-familyを適用する。

 

たったの3ステップでGoogle Fonts(Webフォント)が使えます。

Webフォントを上手に使って、綺麗なデザインのWebサイトを作りましょう!