ゲレの工房

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

自分のブログで公開されているWebフォントを使う


スポンサーリンク


Hello World!

と突然謎の文字を書いてみました。
上記は「Hello World!」と書いています。
フォントは私が遊んでいるFF14で使われているノルヴラント文字のフォントを使いました。
このフォントは私の自作なのですが、この記事のブログシステム:はてなブログ上にアップロードしたわけではありません。
今回の記事は自分のブログでWebフォントを使うお話です。

HTMLタグが使えるブログシステムなら、Webフォントも使える

上記は実際にはこのように書きました。

<style type="text/css">
@font-face {
    font-family: 'Norvrandt-Regular';
    src: url('https://gelehrtecrest.github.io/norvrandt-font/fonts/Norvrandt-Regular.woff') format('woff');
}
.norvrandt {
    font-family: 'Norvrandt-Regular';
}
</style>

<h3 class="norvrandt">Hello World!</h3>

やっていることは、

  • CSSで公開されているWebフォントのURLを書き込む
  • font-familyでフォントを指定する

これだけです。
CSSはheadタグ内に書くのが普通なのですが、ブログ記事内で書いても一応動きますね。


ちなみにこの記事を参考にしました。
www.hp-stylelink.com

せっかくなのでFF14の「Shadowbringers」の歌詞をノルヴラント文字で書いてみる

全部引用するのは問題ですので、最初の一部だけ
全文の歌詞を読みたい方は引用元へどうぞ。
「Shadowbringers」の歌詞を公開します! | ファイナルファンタジーXIV: 公式ブログ

では早速

For whom weeps the storm,
Her tears on our skin
The days of our years gone,
Our souls soaked in sin
These memories ache with the weight of tomorrow


なんかかっこいいですね(=゚ω゚)
他にも世の中には公開されているフリーフォントがあるので、自分のブログで試してみるのもいいですね。

ノルヴランド文字フォントもよろしくね

今回の記事を書くために、今までは自作フォントをTTF・OTF形式だけで公開していましたが、WOFF形式も公開しました。
もしよろしければお試しいただければ幸いです。
blog.gelehrte.com

色々と活用していただけると嬉しいです。
f:id:gelehrtecrest:20190924110358p:plain


スポンサーリンク