Displaying Chess Boards With The Chess Mérida Font

Displaying chess boards with the Chess Mérida font

For clear representation of chess diagrams and notation on my website, I integrated the Chess Mérida font. This font, originally designed by Armando Hernandez Marroquin, is specifically tailored for chess content. I use a WOFF2 web font version which allows chess positions to be represented using a compact character stream, including board borders and coordinates.

Understanding Chess Mérida glyphs

The font uses different characters to represent pieces depending on the color of the square on which they appear. This allows the same font to render both the chess pieces and the alternating square pattern.

For example, the internal representation used by the board renderer maps the standard FEN piece characters to specific Mérida glyphs. The case of the resulting glyph is determined by the color of the corresponding square.

The font also includes glyphs for:

• Chess pieces, with separate glyphs for pieces on light and dark squares.
• Empty squares, represented by + and *.
• Border elements, including the top, bottom, left, and right borders.
• Rank coordinates using the characters «, ∆, ≈, ƒ, √, ¬, ¡, and ¿.
• File coordinates using the characters », …, Ú, À, Ã, Õ, Œ, and œ.

These characters can be combined into a compact text representation of a complete chessboard.

Web implementation with CSS

The Mérida font is loaded using @font-face. The board itself uses the font with a fixed line height so that the individual characters form a continuous chess diagram.

@font-face {
  font-family: Merida;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/path/to/your/merida.woff2') format('woff2');
}

.chessboard-merida-container {
  container-type: inline-size;
}

.chessboard-merida {
  font-family: Merida, serif;
  font-size: min(40px, 10cqw);
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
}

.theme-primary .chessboard-merida {
  color: #0083B3;
}

.theme-complementary .chessboard-merida {
  color: #FF4030;
}

The board uses a maximum font size of 40px, giving a board width of approximately 400px. On smaller containers, the font size is reduced automatically so that the board remains within its available width.

Creating the board with HTML

The board is generated from a FEN position by the JavaScript board renderer. The HTML only needs to provide the board element and the desired options.

<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 renderer converts the FEN position into the appropriate Mérida character stream, including the board borders and, when requested, the coordinates.

Styling variations

The board color can be changed using the theme classes provided by the chessboard implementation:

.theme-primary .chessboard-merida {
  color: #0083B3;
}

.theme-complementary .chessboard-merida {
  color: #FF4030;
}

The color is applied to the complete Mérida character stream. The font itself provides the visual distinction between the light and dark squares, so no individual square elements or background colors are required.

Coordinate systems

The Mérida font includes glyphs that can be used to display board coordinates.

The rank coordinates are represented by:

« ∆ ≈ ƒ √ ¬ ¡ ¿

and the file coordinates by:

» … Ú À Ã Õ Œ œ

The renderer selects the appropriate coordinate characters according to the board orientation. When the board is displayed from Black’s perspective, the coordinate order is reversed automatically.

Coordinates can be enabled with:

data-coordinates="true"

For example:

<div
  class="chessboard-fen-js"
  data-renderer="merida"
  data-coordinates="true"
  data-fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
></div>

This setup provides a compact way to display chess positions directly from FEN using the Chess Mérida font.

Here are some examples:

For more insights into this topic, you can find the details here.