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.

Navigate to Marketing > Website Landing Pages
Choose your page to Edit
Click Settings
Select Font on the left panel
Use the dropdown to select from available fonts
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.

Navigate to the Head Code
Insert the web-safe font CSS code inside a <style> tag
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:

Visit Google Fonts

Find and select your desired font
Click Get Font
Select Get Embed Code
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:

Navigate to the Head Code
Insert the Google Font embed code
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:

Obtain the font files in web formats (.ttf, .woff, .woff2, .eot, .svg)
Upload these files to your own server
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.