ゲレの工房

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

FF14雑記:ゲレフォントをHTML上で利用できるCSSの公開(FF14で使われている文字+ニーアの天使文字など)


Gelehrte Crest

これは私のガイアDCのキャラ名のGelehrte Crestを、私の作成したフォントでエオルゼア文字化したものです。CSSが使える環境であればどこでも使えるようなCSSを公開します。ただ自分の環境でしか試していないので、もし使えなかった場合はご連絡いただければと思います。

使い方

CSS

こちらをHTML上に書き込んでください。

<link href="https://www.gelehrte.com/public/css/gelefont.css" rel="stylesheet">

また、HTML以外でのCSSの読み込みについては、ご自身で調べていただければ幸いです。(そしてそっと教えていただけると、この記事に反映したいと思います)

追記:CSSのMinify化について

一応作りました。こちらを読み込むほうが読み込み速度速いとは思います。大きな差は無いとは思いますが。

<link href="https://www.gelehrte.com/public/css/gelefont.min.css" rel="stylesheet">

文字の書き方

<p class="eorzea">Gelehrte Crest</p>

このようにclassに書き込んでいただければ、文字が対応したフォントに変わるはずです。classに書き込める文字の種類は以下のとおりです(執筆時 2022/02/05)

  • エオルゼア文字:eorzea
  • エオルゼア文字ブラックレター:blackletter
  • エオルゼア文字ドット:eorzea-dot
  • エオルゼア文字筆記体:eorzea-cursive
  • エオルゼア丸文字:eorzea-maru
  • クガネ文字:kugane
  • クガネ文字ドット:kugane-dot
  • ノルヴラント文字:norvrandt
  • ノルヴラント文字5.0時代バージョン:norvrandt5
  • ノルヴラント文字ドット:norvrandt-dot
  • ノルヴラント文字5.0時代バージョンドット:norvrandt5-dot
  • ニーア・天使文字:nier
  • アーテリス文字:etheirys
  • サベネア文字:thavnair

追記 (2022/04/11):EorzeaSmart

エオルゼア文字の作り直して使いやすくしたバージョンも使えるようにしました。

  • EorzeaSmart : eorzea-smart

Gelehrte Crest

<p class="eorzea-smart">Gelehrte Crest</p>

天使文字も書けちゃうの?

本記事を見た人のなかには、FF14プレイヤーではなくニーア関連の方もいらっしゃるかもですね。こんな感じで書けます。

NieR Automata

CSSを経由せずに、直接フォントを読み込みたいよーって人へ

実際のWebフォントのURLとかは以下のようになります。
https://gelehrtecrest.github.io/eorzea-font/fonts/Eorzea-Regular.woff

詳しくはCSSのファイル( https://www.gelehrte.com/public/css/gelefont.css )内に直にURL書いてありますので、それを参考にしてください。

それでも使い方がわからないよーって方へ

私のTwitterへレスを頂ければ、可能な限り対応します。DMも開放していますので、お気軽にどうぞ。
twitter.com

特にクロスドメイン関係のエラーが出る可能性があり、そのテストが不十分な可能性があるので、ツッコミを多数お待ちしています!

エオルゼア文字筆記体、アーテリス文字、サベネア文字について未完成じゃないの?というツッコミについて

そのとおりです
現在作成中ということもあり、作成された状態をそのままHTML側で読み込むので、常に最新版が読み込まれます。現在どのような文字が実装済みかは随時こちらのページで反映されるようになっています。

blog.gelehrte.com

別に読み込みたくないフォントもあるんだけど

その場合は自分でCSSを改変してください。利用規約にも書きますが、改変は自由に行っていただいて構いません。

これって、BOOTHで有料公開されているフォントも無料で使えちゃう状態だけどいいの?

うん いいよ

利用規約

  • CSSは二次創作の範囲内であれば自由に利用していただいて構いません。
  • CSSを利用における損害に対しては一切の責任を負いません。
  • CSSを利用することについて、私への報告の義務はありません。
  • 事前の通告なしで本CSSの公開を取りやめる場合があります。
  • 主にスクウェア・エニックス社様に怒られた場合、すぐに取り下げます。
  • CSSの改変・再配布は自由に行っていただいて構いません。むしろ、読み込むフォント数を減らしたほうが、ページ読み込み速度が上がると思います。

ま、お決まりのやつです。

終わりに

このようなCSSを公開するに至った経緯について

実はエオルゼア文字筆記体がずっと未完成のまま引きずっているというのが心残りでした。どこが未完成かというと、「なんか個人的にまだキレイじゃないなーって」思っている私の感想からです。ただそれだけです。

妻に相談して、カリグラフィーの勉強を始めようとしているところです。もしかするといずれもっとキレイにかけるかもしれません。

アーテリス文字とサベネア文字の完成に向けて

相変わらずのお願いですが、文字を探し中です!6.0x内では、これ以上は見つかりそうにありません。6.1以降に期待ですかね。でも

私が見つけきれていないだけで、すでに見つけている人もいるかも知れません!見つけたら教えて下さい!

というところで、本記事を締めます。使い方とかわからない場合はほんとに気軽に質問してくださいね。それでは。


広告