Chess Mérida Font Glyphs (Other Symbols)
To display chess diagrams and notation effectively, I integrated the Chess Mérida font. Originally created by Armando Hernandez Marroquin as a TrueType font in 1998, this classic font, named after the Yucatecan city, is specifically designed for chess diagrams and figurine notation. This website uses a WOFF2 web font version, which supports features like frames with coordinates, making it ideal for clear chess representation.
| Chr | key | description |
|---|---|---|
|
k
|
k | White King / White Square |
|
K
|
K | White King / Black Square |
|
q
|
q | White Queen / White Square |
|
Q
|
Q | White Queen / Black Square |
|
r
|
r | White Rook / White Square |
|
R
|
R | White Rook / Black Square |
|
b
|
b | White Bishop / White Square |
|
B
|
B | White Bishop / Black Square |
|
n
|
n | White Knight / White Square |
|
N
|
N | White Knight / Black Square |
|
p
|
p | White Pawn / White Square |
|
P
|
P | White Pawn / Black Square |
|
l
|
l | Black King / White Square |
|
L
|
L | Black King / Black Square |
|
w
|
w | Black Queen / White Square |
|
W
|
W | Black Queen / Black Square |
|
t
|
t | Black Rook / White Square |
|
T
|
T | Black Rook / Black Square |
|
v
|
v | Black Bishop / White Square |
|
V
|
V | Black Bishop / Black Square |
|
m
|
m | Black Knight / White Square |
|
M
|
M | Black Knight / Black Square |
|
o
|
o | Black Pawn / White Square |
|
O
|
O | Black Pawn / Black Square |
|
¢
|
¢ | fig. notation king |
|
£
|
£ | fig. notation queen |
|
§
|
§ | fig. notation knight |
|
•
|
• | fig. notation bishop |
|
¶
|
¶ | fig. notation rook |
|
ß
|
ß | fig. notation pawn |
| Chr | key | description |
|---|---|---|
|
x
|
x | x on white square |
|
.
|
. | dot on white square |
| [space] | white square | |
|
*
|
* | white square |
|
X
|
X | x on black square |
|
:
|
: | dot on black square |
|
+
|
+ | black square |
|
1
|
1 | single top left corner |
|
2
|
2 | single top border |
|
3
|
3 | single top right corner |
|
4
|
4 | single left border |
|
5
|
5 | single right border |
|
7
|
7 | single bottom left corner |
|
8
|
8 | single bottom border |
|
9
|
9 | single bottom right corner |
|
!
|
! | double top left corner |
|
"
|
" | double top border |
|
#
|
# | double top right corner |
|
$
|
$ | double left border |
|
%
|
% | double right border |
|
/
|
/ | double bottom left corner |
|
(
|
( | double bottom border |
|
)
|
) | double bottom right corner |
|
a
|
a | single round top left corner |
|
s
|
s | single round top right corner |
|
d
|
d | single round bottom left corner |
|
f
|
f | single round bottom right corner |
|
A
|
A | double round top left corner |
|
S
|
S | double round top right corner |
|
D
|
D | double round bottom left corner |
|
F
|
F | double round bottom right corner |
|
¿
|
¿ | single coordinate 1 border |
|
¡
|
¡ | single coordinate 2 border |
|
¬
|
¬ | single coordinate 3 border |
|
√
|
√ | single coordinate 4 border |
|
ƒ
|
ƒ | single coordinate 5 border |
|
≈
|
≈ | single coordinate 6 border |
|
∆
|
∆ | single coordinate 7 border |
|
«
|
« | single coordinate 8 border |
|
»
|
» | single coordinate a border |
|
…
|
… | single coordinate b border |
|
Ú
|
Ú | single coordinate c border |
|
À
|
À | single coordinate d border |
|
Ã
|
à | single coordinate e border |
|
Õ
|
Õ | single coordinate f border |
|
Œ
|
Π| single coordinate g border |
|
œ
|
œ | single coordinate h border |
|
‡
|
‡ | double coordinate 1 border |
|
·
|
· | double coordinate 2 border |
|
‚
|
‚ | double coordinate 3 border |
|
„
|
„ | double coordinate 4 border |
|
‰
|
‰ | double coordinate 5 border |
|
Â
|
 | double coordinate 6 border |
|
Ê
|
Ê | double coordinate 7 border |
|
Á
|
Á | double coordinate 8 border |
|
Ë
|
Ë | double coordinate a border |
|
È
|
È | double coordinate b border |
|
Í
|
Í | double coordinate c border |
|
Î
|
Î | double coordinate d border |
|
Ï
|
Ï | double coordinate e border |
|
Ì
|
Ì | double coordinate f border |
|
Ó
|
Ó | double coordinate g border |
|
Ô
|
Ô | double coordinate h border |
The following <stylesheet> need to be at the top of the pages:
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/assets/css/tools/chess-fonts.min.css" media="screen">
The base display uses a black and white theme for the board squares. You can modify this appearance by adding specific CSS classes to the main <div class="chessboard"> element.
Use chessboard-primary or chessboard-complementary to switch to alternative color themes defined in your site's main stylesheet (e.g., using Bootstrap variables).
<div class="col-lg-4 col-12 text-center">
<div class="chessboard chessboard-complementary">
<div class="rank">1222222223</div>
<div class="rank">«tMvWlVmT5</div>
<div class="rank">∆OoOoOoOo5</div>
<div class="rank">≈*+*+*+*+5</div>
<div class="rank">ƒ+*+*+*+*5</div>
<div class="rank">√*+*+*+*+5</div>
<div class="rank">¬+*+*+*+*5</div>
<div class="rank">¡pPpPpPpP5</div>
<div class="rank">¿RnBqKbNr5</div>
<div class="rank">7»…ÚÀÃÕŒœ9</div>
</div>
</div>
The examples below demonstrate the default theme alongside the primary and complementary color variations. They also show boards using standard numeric/alpha coordinates (1-8, a-h represented by symbols) and an alternative set of symbols.
The following <script> need to be placed near the end of the pages:
<!-- JavaScript Files -->
<script src="/assets/js/merida.min.js"></script>
Then it is possible to define two classes: class="chessboard-base-js" for a plain chessboard, and class="chessboard-js" for a chessboard with standard numeric/alpha coordinates (1-8, a-h represented by symbols).
The data in Forsyth–Edwards notation are inserted into data-fen="..." field are read by the JavaScript library.
<!-- Base board placeholder -->
<div class="chessboard-base-js" data-fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1">
<!-- Optional placeholder text -->
</div>
The examples below demonstrate the default theme alongside the primary and complementary color variations.