Fonts (Theme)

Fonts (Theme)

All Vibe templates use Open Sans by default. While you can't add fonts through the Admin Console or Portal, the Vibe.fyi support team can assist. Once added, all templates will use your custom fonts.

Design Requirements

  1. Provide three font files in the following categories, and ensure variations like light, regular, bold, and italic are included to match your brand:
    1. Heading/Subheading (e.g., Open Sans Bold)
    2. Body (e.g., Open Sans Regular)
    3. Accent (e.g., Open Sans Italic)

  2. Font Licensing

    Please ensure that you have the appropriate web and display licensing for the fonts you are providing, especially for digital signage applications. Vibe.fyi cannot be held responsible for font licensing issues. You should only provide fonts that are licensed for commercial use and suitable for display on digital signage.

  3. File Format

    • Required Format: .WOFF (Web Open Font Format)
    • Ensure that your font files include the Latin-Extended character set to ensure proper display of diacritics and macrons (important for languages such as Māori).

    • Font Files Organization

      When submitting the font files, please organize them as follows:

      1. Clear Naming: Name the font files clearly to distinguish different styles (e.g., OpenSans-Bold.woff, OpenSans-Regular.woff, OpenSans-Italic.woff).
      2. ZIP Folder: If you have multiple font files, bundle them into a ZIP file to keep everything organized.

Considerations for Digital Signage Display

When designing for digital signage screens, there are a few key things to keep in mind:
  1. Resolution and Legibility: Digital signage screens, especially large-format displays, can have various resolutions. Make sure the fonts you choose are legible at different sizes and distances. 
  2. Optimized for Display: The font files should be optimized for screen display, as certain fonts that work well for print or web may not render well on digital signage screens. 
  3. Fallback Font – Open Sans: In case your custom font does not load, Open Sans will be used as the fallback font across all templates. 
  4. File Size and Performance: Digital signage systems often have performance constraints, so it’s important to keep the font files as lightweight as possible.

3rd Party Resources for Font Conversion

  1. CONVERT: https://www.fontsquirrel.com/tools/webfont-generator
  2. TEST: https://fontsee.com/
    1. Use the following example text to check if macrons and special characters display correctly:
      1. "Quīck brown fōxes jump ōver the lāzy døg."
        "Æthelred, the ancient historian, discovered a mysterious text: 'Café, naïve, résumé, déjà vu.'"
        "Special chars: @ # $ % ^ & * ( ) _ + = { } | : ; < > ? ~` / \ !" ' , . ; : " ' "
        "Numbers: 1234567890"

    2. This includes:

      1. Diacritics and accents (like ī, ū, ā, ō)
      2. Special characters (like @, #, $, %, &, *, etc.)
      3. Punctuation (like " ' , . ; :)
      4. Uppercase and lowercase characters in different languages
      5. Numbers to test all font-related characters

      This example will help ensure that all characters in your font file are properly rendered across different platforms and languages.

Ensuring Full Language Support:

If you're working with a language that requires a broader set of characters (e.g., Cyrillic, Greek, Arabic, Hebrew, etc.), you should consider checking for the specific Unicode block that supports these characters.

For example:
  • Latin-Extended-A and Latin-Extended-B cover many European languages.
  • Greek and Coptic characters are in their own Unicode block.
  • Cyrillic characters have their own Unicode block as well.

If your custom fonts are meant to support a wide variety of languages, it might be important to check that they support the complete Unicode set (which includes characters from all scripts, not just Latin-based).

What to Do:

  • Verify that the font you're using supports the necessary characters for all the languages your signage might display.
  • Test using comprehensive sample text that includes characters from the specific languages your system needs to support (including accented letters, special symbols, and any non-Latin characters).

By doing this, you can ensure full language support and avoid any rendering issues on the signage.

Additional Notes for Designers

  1. Test Legibility on Different Screen Sizes:
    Ensure your fonts are legible across different screen sizes and viewing distances. Check font readability both up-close and from a distance on your specific signage hardware.
  2. Ensure Proper Spacing and Alignment:
    Fonts can appear differently on digital signage screens due to their resolution and pixel density. Test how your fonts appear at different sizes to ensure proper spacing, kerning, and alignment across various display setups.
  3. Fonts for High-Resolution Displays:
    If your signage uses high-resolution displays, ensure the fonts are compatible with these screens and retain their crispness when viewed at larger sizes.

How to Change the Theme Font for Digital Signage

To update the font used in your digital signage theme, send your font files in the correct .WOFF format (as outlined above) to the Vibe.fyi Support team. We will verify the font files for compatibility with your digital signage setup, ensuring they are optimized for display and update your theme accordingly.

    • Announcements

    • Template Updates Now Live

      We’ve rolled out a fresh batch of template enhancements to make designing even smoother: 🖼️ Improved Video Upload Naming The Multi (Video–Weather–Content) template now supports a clearer naming convention for landscape video file uploads. 📱 QR Code

    • SharePoint API Updates

      We’ve made some key improvements behind the scenes to keep your SharePoint integrations running smoothly: ✅ Renamed the "Azure API" module to "SharePoint API" – clearer name, same purpose! 🛠️ Fixed a Cloudflare error that appeared when adding a new SharePoint

    • Template Tour Videos

      We’re excited to introduce videos when you - 'Create New Slide' - to help you explore our templates like never before! Hover over a template to preview its animations and design features. Click the button for a full walkthrough of completed Template Tours.

    • Maximise Communication with Vibe’s Enhanced Desktop Player

      Manage Screensavers, Lock Screens, and Background Wallpaper across your organisation for seamless, subtle communication that reinforces key messages without disrupting workflow. &amp;amp;lt;br&amp;amp;gt; Talk to the Vibe team to discuss activating these