How to Ensure Fonts Set in the Editor Display Correctly on PCs and Smartphones
When fonts you set in the editor appear differently on PCs and smartphones, it may be due to the use of System Fonts. Here's how to diagnose and fix this issue.
Tips: Understanding System Fonts
System Fonts are pre-installed on devices like Mac, Windows, and iOS. When you specify a System Font in the editor, it will display as intended only if that font is installed on the visitor’s device.
Otherwise, the device or browser will automatically substitute it with an available font.
Checking Your Font Settings
To verify if System Fonts are causing the display issue:
Open your project and access the editor
Select the problematic text
In the style bar at the top, hover over "Font" in the Text tab
Click ">" to open font details
Copy the applied font name
Search for this font name in the System Font dropdown
If you find the same font name in the search results, your text is using a System Font.
Solutions
If System Fonts Are the Cause:
Set Subsidiary Fonts (Sub Fonts) for Different Environments *Coming soon
Configure alternative fonts for specific devices and browsers
This allows better control over font display across different platforms
Switch to Web Fonts
Web fonts display consistently across all browsing environments
Available options include:
Google Fonts
TypeSquare (Morisawa) *Available to accounts set to Japanese
FONTPLUS
Note: Web fonts require loading time, which may affect site performance. Consider this trade-off when switching from System Fonts.
If System Fonts Are Not the Cause?
Contact chat support through the "?" button in the bottom right of the editor.
Best Practices
When working with fonts:
Consider your target audience's devices
Test your site across different platforms
Use web fonts for consistent branding
Balance performance with design needs