Skip to main content

Storefront Website Fonts

Ensure optimal custom font display on your storefront

Updated today

Customizing your website's fonts is a powerful way to enhance your brand identity and improve user experience on your Uscreen platform.

This guide covers everything you need to know about implementing custom fonts, from using Uscreen's native font options to adding specialized typefaces through CSS.

We'll also address important considerations like GDPR compliance, cross-platform compatibility, and performance optimization to ensure your site looks great while maintaining legal compliance and optimal loading speeds.

📝 NOTE: Custom font implementation through CSS is considered an advanced customization that falls outside the scope of standard Uscreen support.

While we provide these guidelines to help you, you may need to consult with a developer for specific implementation issues.


Landing Page Fonts

Uscreen's Landing Page Builder offers native font selection options that are separate from your main site settings.

💡 TIP: For consistent branding, try to match your landing page fonts with your main site's typography.

  1. Navigate to Marketing > Website Landing Pages

  2. Choose your page to Edit

  3. Click Settings

  4. Select Font on the left panel

  5. Use the dropdown to select from available fonts

  6. Wait for the changes to auto-save

📝 NOTE: Remember that landing pages don't automatically inherit your main site's styling. Each landing page's fonts must be configured individually.


Custom Fonts

Standard Fonts

Uscreen supports web-safe standard fonts (e.g., Arial, Helvetica, Times New Roman, etc.) that work reliably across all devices and browsers.

  1. Navigate to the Head Code

  2. Insert the web-safe font CSS code inside a <style> tag

  3. Click Save Changes

* {
font-family: Arial, sans-serif;
}

ℹ️ INFO: Using standard custom fonts ensures consistent rendering across devices and avoids potential compliance concerns.

Non-Standard Fonts (Google Fonts)

When you want to use custom fonts beyond the standard options:

In Google Fonts:

  1. Find and select your desired font

  2. Click Get Font

  3. Select Get Embed Code

  4. Copy either of the two embed codes

    • <link> (HTML method)

    • @import (CSS method)

📝 NOTE: Fonts may display differently across devices and browsers, especially when font assets are missing. To get around these situations, you can include fallback fonts in your CSS.

In Uscreen:

  1. Navigate to the Head Code

  2. Insert the Google Font embed code

  3. Click Save Changes

⚠️ WARNING: Using Google Fonts via either method may violate GDPR and other governing policies. We generally do not recommend using custom Google Fonts for this reason.

Other Custom Fonts

For custom fonts from other sources:

  1. Obtain the font files in web formats (.ttf, .woff, .woff2, .eot, .svg)

  2. Upload these files to your own server

  3. Add the appropriate CSS to the Head Code

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ display: swap; }

💡 TIP: Without proper implementation, users may see text briefly rendered in a default font before switching to your custom font. Use font-display: swap; to mitigate this issue.


FAQs

Why isn't my font showing up on landing pages?

Landing pages are standalone and don't automatically inherit your main site's styling. Also, be sure to Enable the Head Code Snippet on your Landing Pages.

How can I identify what fonts are currently used on my site?

Use browser extensions like 'WhatFont' or inspect elements using your browser's developer tools to see font-related properties.

Do I need to hire a developer to implement custom fonts?

While basic implementations can be done following this guide, complex customizations or troubleshooting may require professional assistance.

Did this answer your question?