Google Fontsの使い方 - 浜村拓夫（・∀・）作品集

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

・Sidr - A jQuery plugin for creating side menus

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

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

●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フォントを表示できない環境では使えないので、デザイン上は注意する必要があるみたいです。