This is a documentation for Board Game Arena: play board games online !

Game fonts: fonts directory: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(Created page with "{{Studio_Framework_Navigation}} __TOC__ == Game fonts == You must upload in a `fonts` directory all fonts that you will use in your game interface. All fonts in your font directory are loaded on a player's browser when he loads the game. It will take in priority the font with type : woff2 > woff > otf > ttf. To be correctly deployed your font file names should not contain spaces or special characters. The you can use them by setting a font-family with the filename...")
 
No edit summary
Line 30: Line 30:
   }
   }
</pre>
</pre>
== Debugging ==
In the DevTool console, write <code>document.getElementById('bga-auto-declared-font-faces')</code> to list the fonts that are preloaded by the framework.


[[Category:Studio]]
[[Category:Studio]]

Revision as of 14:10, 1 April 2026


Game File Reference



Useful Components

Official

  • ItemManager: a PHP component to manage cards or other game items.
  • PlayerCounter and TableCounter: PHP components to manage counters.
  • Draggable: a JS component to manage drag'n'drop actions.
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).
  • bga-zoom : a JS component for zoom controls.
  • bga-animations : a JS component for animations.
  • bga-cards : a JS component for cards.
  • bga-dice : a JS component for dice.
  • bga-autofit : a JS component to make text fit on a fixed size div.
  • bga-score-sheet : a JS component to help you display an animated score sheet at the end of the game.
  • bga-jump-to : a JS component to add board shortcuts

Deprecated

  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.

Unofficial



Game Development Process



Guides for Common Topics



Miscellaneous Resources

Game fonts

You must upload in a `fonts` directory all fonts that you will use in your game interface.

All fonts in your font directory are loaded on a player's browser when he loads the game. It will take in priority the font with type : woff2 > woff > otf > ttf. To be correctly deployed your font file names should not contain spaces or special characters.

The you can use them by setting a font-family with the filename (note the dashes will be replaced by spaces), without needing to declare a `@font-face`.

Example

With a `custom-font.woff2` in the `fonts` directory:

  .element-with-custom-font {
    font-family: 'custom font';
  }

With a `custom-font-bold.woff2` in the `fonts` directory:

  .element-with-custom-font-bold-solution1 {
    font-family: 'custom font';
    font-weight: bold;
  }
  .element-with-custom-font-bold-solution2 {
    font-family: 'custom font bold';
  }

Debugging

In the DevTool console, write document.getElementById('bga-auto-declared-font-faces') to list the fonts that are preloaded by the framework.