Digioh already includes common system fonts like Arial and Verdana. This guide shows you how to add other fonts already installed on most devices, like Georgia, Times New Roman, or a device's native interface font, to your Digioh font dropdowns without hosting a font file.

Why this works

Fonts like Georgia and Times New Roman are already installed on most devices, so nothing needs to be hosted. The catch is that Digioh's font dropdowns only list fonts that have been added to your account. To add one, you create a Font CSS record, but instead of pointing src at a hosted .woff2 file, you point it at the copy already on the visitor's device using local().

How to add a font

1. When you are logged into Digioh, click your Account Name in the upper right corner. Go to Custom Fonts → Step 2 - Generate CSS → Manually Add Custom Font CSS in the top right corner. 

2. On the Add New Font page, set Name to the font's family name. This must exactly match the font-family value used in the CSS you'll paste in the next step.

3. Paste the font CSS for the font you're adding into Font Face CSS.

4. Leave Sans-Serif unchecked for serif fonts like Georgia and Times New Roman. Check it only for sans-serif fonts like Arial or System UI.

5. Click Save.  

The font now appears in your custom fonts list and in the Digioh font dropdowns.

Georgia

Name: Georgia   Sans-Serif: unchecked

Times New Roman

Name: Times New Roman   Sans-Serif: unchecked

Native / System UI stack

Some sites use "System UI," a stack that resolves to whatever interface font the visitor's operating system uses: San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android. CSS has a generic system-ui keyword for this, but @font-face doesn't accept generic keywords, so this recreates the effect with a chain of local() values. The browser works through the list and uses the first font it finds.

Text set this way matches the device's own interface, which feels fast and native. It also means a campaign looks slightly different on each platform, so use System UI only where it's needed. Using it for headlines or full body copy can cause unexpected line breaks or sizing issues on some devices. 

Name: System UI   Sans-Serif: checked

Rules and considerations

• Important: The Name field must exactly match the font-family string in your CSS. If they don't match, the dropdown selection won't resolve.

• Note: Four font-face blocks make up one entry. Declaring all four styles (regular, bold, italic, bold italic) under a single family name lets the editor's Bold and Italic toggles use the font's real designed styles instead of a browser-faked bold or slant, and it keeps the dropdown to one option per family.  

• Tip: If you need one entry per weight instead of one per family, create separate records, for example Georgia, Georgia Bold, Georgia Italic, and Georgia Bold Italic, each with its own font-family string matching the record name and font-weight: normal. This adds complexity, so only do it if you have a specific reason to.

• Note: Android and most Linux devices don't include Microsoft's core fonts. They fall back automatically: Georgia and Times New Roman become Noto Serif, and Arial and Verdana become Roboto. The serif or sans-serif feel survives even though the exact font doesn't. This is expected. 

• Note: Firefox in Resist Fingerprinting mode, and some other hardened browsers, block local font lookups. When that happens, the rule fails silently and the browser falls back to the next font in the stack. Make sure your stack ends in a generic value (serif, sans-serif, or monospace) so text still renders. This is cosmetic only and won't break the layout. 

• This same approach works for any system font. Just swap in the right local() names and match the number of real font styles available.

Questions? Reach out to support@digioh.com, we're happy to help.