How to Add Custom Fonts to Monkeytype
Monkeytype is one of the most popular browser-based typing test platforms, partly because of how much it lets you personalize the experience. Font choice is a big part of that — the right typeface can make long practice sessions more comfortable and even affect how accurately you perceive character shapes while typing. Here's how custom fonts work on Monkeytype, what controls what, and where individual setups start to diverge.
What Font Customization Looks Like on Monkeytype
Monkeytype has a built-in font selector in its settings panel. By default, it ships with a curated list of Google Fonts — typefaces like Roboto Mono, JetBrains Mono, Fira Code, and others that are well-suited for typing tests because of their monospaced or legible proportional design.
But the platform also supports loading fonts that aren't in that preset list. This is where "custom fonts" comes in — and there are a few distinct paths depending on whether you're using the public hosted version or a self-hosted instance.
Method 1: Using the Custom Font Field in Settings 🖋️
On the hosted version at monkeytype.com, the font settings section includes a text input field where you can type the name of any font you want to use. Here's how that works:
- Open Settings in Monkeytype
- Scroll to the Appearance section
- Find the Font Family setting
- Click into the input field and type the exact name of the font you want
The key detail: for this to work, the font must already be loaded in your browser. Monkeytype doesn't fetch arbitrary fonts from the internet on your behalf — it checks what's available in the browser's rendering environment.
This means the font needs to come from one of two places:
- It's already installed on your operating system — system fonts like Arial, Georgia, Courier New, or any font you've installed locally will be accessible to the browser
- It's loaded via a browser extension — some extensions inject CSS or font resources into web pages, making additional fonts available
If you type a font name that the browser can't find, Monkeytype will fall back to the default, so you'll know immediately whether it worked by checking if the text appearance changes.
Method 2: Installing Fonts at the OS Level
If you want to use a specific typeface — say, a premium coding font like Cascadia Code, Input Mono, or a niche display font — the most reliable approach is to install it on your operating system.
On Windows: Download the font file (.ttf or .otf), right-click it, and select Install or Install for all users.
On macOS: Open the font file and click Install Font, or drag it into Font Book.
On Linux: Copy the font file to ~/.local/share/fonts/ for a per-user install, then run fc-cache -fv to refresh the font cache.
Once installed, the font becomes a system font. Any browser running on that machine — Chrome, Firefox, Edge, Safari — will have access to it. You can then type that font's exact name into Monkeytype's custom font field and it should render correctly.
The font name you enter must match exactly — including spacing and capitalization — as the font is registered on your system. If a font is registered as "Cascadia Code" but you type "CascadiaCode", it won't load.
Method 3: Self-Hosted Monkeytype Instances
Monkeytype is open source. Developers and power users who run their own local or server-hosted instance have significantly more control. In this setup, you can:
- Edit the CSS or font configuration files directly to add
@font-facedeclarations - Host custom font files alongside the app and reference them locally
- Modify the font list shown in the settings dropdown so your custom fonts appear as selectable options
This approach requires familiarity with web development basics — at minimum, understanding how @font-face works in CSS and how to serve static assets. The Monkeytype GitHub repository is well-documented, and the community around it is active, so there are resources for navigating this path.
Variables That Affect Which Method Works for You
| Factor | Impact |
|---|---|
| Using hosted vs. self-hosted | Self-hosted gives full CSS control; hosted relies on system/browser fonts |
| Operating system | Font installation process differs across Windows, macOS, Linux |
| Technical skill level | Self-hosting and CSS edits require development knowledge |
| Font licensing | Some commercial fonts restrict web embedding or redistribution |
| Browser used | Most modern browsers handle system fonts the same, but edge cases exist |
Font Types That Work Best for Typing Tests 🔡
Not every font makes a good choice for a typing test environment. A few practical considerations:
- Monospaced fonts are traditionally preferred for typing tests because each character occupies equal horizontal space, making text columns predictable
- High x-height fonts (where lowercase letters are relatively tall) tend to be easier to read at speed
- Fonts with distinct character shapes — especially for commonly confused characters like
l,1,I,O, and0— reduce visual ambiguity during fast typing
Decorative, script, or display fonts can work, but they're generally chosen for aesthetic reasons rather than performance, and some users find them fatiguing in longer sessions.
Where Individual Setup Matters
The method that makes sense depends heavily on your situation. Someone who just wants a different coding font for casual practice has a straightforward path through OS installation. A developer running Monkeytype locally has the full toolkit to do whatever they want with fonts. A user on a locked-down work machine may find system font installs aren't an option at all.
The font name input field is deceptively simple — it looks like you can type anything, but what actually renders depends entirely on what your browser environment already has access to. Understanding that distinction is what separates a font that loads cleanly from one that silently falls back without explanation.