LifeEcho // Fonts

Using system fonts, Google Web Fonts, and self-hosted fonts in LifeEcho.

LifeEcho can style the Echo Stream with local browser fonts or web fonts. The selected font saves with settings and theme files, which makes typography part of the visual identity of a theme or client space.

Option 1: System Fonts

System fonts use fonts already available to the browser or operating system. They load immediately, work offline, and are the safest choice when a display needs to be extremely reliable.

Open LifeEcho settings.
Go to Display & Rotation.
Choose a font from Browser and System Fonts.
If a selected font is not installed, the browser automatically falls back to the next font in the stack.

Option 2: Google Web Fonts

Google Web Fonts are loaded on demand when selected from the Font Family dropdown. This keeps LifeEcho lightweight while still giving you a wider set of expressive fonts.

Open Display & Rotation.
Choose a font from Google Web Fonts.
LifeEcho injects the matching Google Fonts stylesheet into the page.
The setting is saved with themes, exports, and client theme files.

Google Web Fonts require network access to fonts.googleapis.com and fonts.gstatic.com. If a browser extension, firewall, privacy mode, or offline display blocks those domains, LifeEcho falls back to the next font in the stack.

Option 3: Self-hosted Fonts

Self-hosted fonts are best when you need consistent branding, offline behavior, or no third-party font requests. Place font files in the project and load them with CSS.

Example CSS:

@font-face {
  font-family: "Client Display";
  src: url("./fonts/client-display.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

Add the font file, usually .woff2, to a local folder such as /fonts.
Add an @font-face rule in the app CSS.
Add the font option to the Font Family dropdown in lifeecho.html.
Add the matching font stack in DISPLAY_FONT_FAMILY_OPTIONS in js/controllers/appController.js.

Theme Files

Theme files store the selected font in settings.display.fontFamily. If a theme uses a Google Web Font, LifeEcho loads that font automatically when the theme is applied.

Client Spaces

Client spaces can use the same font settings as the main app. For public display pages, self-hosted fonts are the most dependable because they travel with the deployed site.