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>
tagClick 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:
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?
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?
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?
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.