ゲレの工房

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

トップ > ゲレフォント > FF14雑記：エオルゼア文字のBlackLetterフォントの制作と、Webフォントでブログ記事を書く方法について

FF14雑記：エオルゼア文字のBlackLetterフォントの制作と、Webフォントでブログ記事を書く方法について

ゲレフォント エオルゼア文字フォント FF14雑記 FF14

今回、FF14で使われているエオルゼア文字を、BlackLetterというゴシック体の一種のデザインでフォントを実装し、公開をしました。

BOOTH支店のURLはこちら
gelehrtecrest.booth.pm

本ブログの固定ページからのダウンロードはこちら
blog.gelehrte.com

そのデザインをブログ記事に残しておきたくて、本記事でメモを残しておきたいと思います。
また、本ブログ記事でそのフォントの紹介をしておきたいので、Webフォントをはてなブログなどのブログ記事で使う方法についても書きたいと思います。

ダウンロード

上記URLから可能です。

収録文字セット

英数字と最低限の記号になります。


A B C D E F G H I J K L M
A
B
C
D
E
F
G
H
I
J
K
L
M
N O P Q R S T U V W X Y Z
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a b c d e f g h i j k l m
a
b
c
d
e
f
g
h
i
j
k
l
m
n o p q r s t u v w x y z
n
o
p
q
r
s
t
u
v
w
x
y
z
0 1 2 3 4 5 6 7 8 9 ! ? -
0
1
2
3
4
5
6
7
8
9
!
?
-

Webフォントをブログで使う

はてなブログなど、HTMLタグが使えるWebサイトであれば、Webフォントを使うことが出来ます。
今回はこのように書きました。

<style type="text/css">
@font-face {
    font-family: 'Eorzea-Blackletter';
    src: url('https://gelehrtecrest.github.io/eorzea-blackletter-font/fonts/Eorzea-Blackletter-Regular.woff') format('woff');
}
.blackletter {
    font-family: 'Eorzea-Blackletter';
    font-size: x-large;
}
</style>

<div class="blackletter">A</div>

font-faceでWebフォントを読み込んで、CSSでフォント名を指定し、フォントを使いたい文字に対してCSSを適用させているのです。
様々なサイトで、閲覧者がフォントをインストールする必要もなくブログ記事などに使えるので、便利な技術だと思います。
詳しくは、以下のサイトが参考になるかと思います。
www.hp-stylelink.com

終わりに

今回は、一応Regular形式でフォントを作ってみました。
ただ、線が細いなって気がしてきたので、Bold(太字)も対応させようかなと考え中です。
とりあえず備忘録ということでﾉ`・ω・)ﾉ


収録文字を画像ファイルでほしい方はこちらから

一応画像も貼り付けておきますねﾉ`・ω・)ﾉ

エオルゼア文字 ブラックレター ゲレフォント

広告