[Google Fonts] Google Fonts を API もしくは Local から利用する方法

フォント選択後、下向きの矢印をクリックするとフォントをダウンロードできる。

[markdown]
> * [Google Fonts](https://www.google.com/fonts#ChoosePlace:select)

## API

Google Fonts を API から利用する場合。
CSS に以下のように記載する。

“`css
@import url(//fonts.googleapis.com/css?family=Roboto:400,300,500,700|Oswald:400,300,700)
“`

## Local

local server に設置する場合。

> * [Roboto Condensed with @font-face CSS rule – deshack](http://deshack.net/use-roboto-condensed-font-face-css-rule/)

こちらの [Gist](https://gist.github.com/deshack/6317554) を参考にさせて頂きました。
例えば /fonts 以下にダウンロードしたディレクトリを設置した場合、CSS のパスを書き換えるとこのようになる。

“`css
/* Light */
@font-face {
font-family: “Roboto Condensed”;
font-style: normal;
font-weight: 300;
src: local(‘Roboto Condensed Light’), local(‘RobotoCondensed-Light’), url(“/fonts/Roboto_Condensed/RobotoCondensed-Light.ttf”) format(‘truetype’);
}
“`

## 補遺

CSS @font-face について。

> * [Using @font-face | CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/)

Web font について。

> * [ウェブフォントの最適化 | Web Fundamentals – Google Developers](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja)
[/markdown]