, , ,

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

公開日: 2016/02/19
更新日: 2019/07/25

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

API

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

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

Local

local server に設置する場合。

こちらの Gist を参考にさせて頂きました。
例えば /fonts 以下にダウンロードしたディレクトリを設置した場合、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 について。

Web font について。