Mérida Chess Fonts Glyphs (Other Symbols)
To display chess diagrams and notation effectively, I integrated the Chess Mérida fonts. 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/chess/chessboard-themes.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-merida"> element.
Use chessboard-merida-primary or chessboard-merida-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-merida chessboard-merida-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 implementation is common to chessboard-js and the available renderers. The required JavaScript files need to be placed near the end of the page. There is need for chess.js library only for display of dynamic chessboards, for static FEN positions it is not required.
<!-- JavaScript Files -->
<script src="/assets/js/tools/chess-1.4.0.min.js"></script>
<script src="/assets/js/tools/chessboard-reader.min.js"></script>
Add the appropriate board element and specify the renderer with the data-renderer attribute. Additional board options, such as the theme, coordinates, orientation, and FEN position, are specified using the corresponding data-* attributes.
All available data-* attributes and their specifications are documented here.
<div class="chessboard-fen-js"
data-renderer="merida"
data-theme="primary"
data-coordinates="true"
data-fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"></div>
The examples below demonstrate the default theme alongside the primary and complementary color variations.
The examples below demonstrate the same positions from the black pieces.
It is also possible to load a series of PGN games from a JSON file using the data-pgn-json attribute.