Featured image of post Webフォントを使用する

Webフォントを使用する

Webフォントを使いたかったのでWOFF形式に変換をしてみました。

2014 01 05 午前8 48 2

こちらの、「WOFFコンバータ」を利用して変換します。実行後には、EOT形式とWOFF形式が出力されます。

最近AWSづいているので静的コンテンツは今後AWSに移行しようと思いつつできてなかったのでフォント位はおいてどんなもんか見てみたいと思います。

2014 01 05 午前9 25

適当なバケット内に先ほど作成したフォントをおいてパーミッションをmake publicしておきます。これで外部から参照ができるようになるのでWebフォントとして利用ができます。

Wordpressの場合には、直接ファイルを編集がブラウザ経由でできるのでそちらを利用して更新をしてみます。「外観」→「CSSスタイルエディタ」で下の画面になるのでそちらに適当な文言を入れるようにします。

2014 01 05 午前9 28 2

以下のように設定をしてみました。

` @font-face { font-family: “azuki”; src: url(“https://s3-ap-northeast-1.amazonaws.com/webroguer/azukiLP.eot?") format(’eot’), url(“https://s3-ap-northeast-1.amazonaws.com/webroguer/azukiLP.woff") format(“woff”); }

.myFontClass { font-family: “azuki”; }

.entry-title { font-family: “azuki”; }

h3.widgettitle { font-family: “azuki”; } `

Hugo で構築されています。
テーマ StackJimmy によって設計されています。