サイトのヘッダーに使用する為にGoogleフォントからかっこよさげな物を拝借したもののローカル環境ではフォントが反映されないので調べてみました。
Google Fontsから使いたいフォントをダウンロード
まずGoogle Fontsから使いたいフォントを選びます。
セレクトするとダウンロードの矢印が出るので一旦自分のPCにダウンロード。
zip形式でダウンロードされるので展開。
使いたいサイトのディレクトリ内に適当なディレクトリを作成。
僕はわかりやすくfontsという名前にしました。
展開されたディレクトリ内にある2つのファイルをそのディレクトリに移動。
CSS内にfont-face設定
使用したいサイトに使用しているCSSファイルに先程移動してきたフォントを使用できるように設定。
僕はBlackOpsOneというフォントをダウンロードしたのでこのような記述にしました。
style.css
@font-face {
font-family: BlackOpsOne;
src: url('./fonts/BlackOpsOne-Regular.ttf') format("truetype");
}
これで使用準備は出来ました。
あとはそのフォントを使用したい箇所にfont-familyを設定すればOK。
font-family: 'BlackOpsOne';