How to Fix Font Substitution and Use Adobe Fonts in Web and PDF
Question details
The user needs to display custom Adobe fonts correctly on a website or document without the text reverting to a default fallback font on computers where the font is not installed.
- Product
- Web / PDF Documents
- Device & OS
- not provided
- Scenario
- Viewing a website or opening a PDF file on a secondary device that does not have the original custom fonts installed.
- Observed behavior
- The custom Adobe font fails to load and is replaced by a default fallback font like Times New Roman, disrupting the intended design and layout.
Ensure your Adobe font subscription includes proper web licensing if you are using it on a website. For documents and PDFs, confirm the font is fully installed and synced to your local operating system.
Use a Web-Font Service for Websites
Load the font dynamically through a service like Adobe Fonts to ensure it renders on any browser without requiring local installation.
Web browsers cannot access fonts installed only on the web designer's computer. To display custom fonts to all visitors, the website must pull the font files from a licensed web font server.
Log in to your Adobe Fonts account, select your desired font, and add it to a Web Project to generate an HTML <link> embed code.
Copy the generated embed code and paste it into the <head> section of your website's HTML document.
Apply the font-family name provided by Adobe to the relevant elements in your CSS file (e.g., font-family: 'Your Font Name', sans-serif;).
Embed Fonts When Creating PDF Files
If the font substitution occurs in a document rather than a website, embed the font data directly into the PDF during the export process.
Embed Fonts Seamlessly with WPS Office
Whether you are designing documents or creating PDF files, WPS Office allows you to easily embed custom fonts so your layout and typography remain exactly as intended on any device, eliminating annoying font substitution issues.
- 1. Open your document: Launch WPS Office and open the Word, Excel, or Presentation file containing your custom synced Adobe fonts.
- 2. Access Options: Click on the 'Menu' button in the top-left corner, select 'Options', and navigate to the 'General and Save' tab.
- 3. Embed fonts in the file: Check the option for 'Embed fonts in the file' so that your custom typography is packaged with the document data.
- 4. Export to PDF: Go back to the main Menu, click 'Export to PDF', and save your file. The resulting PDF will retain all original fonts perfectly on any computer.
Frequently Asked Questions
Why do my custom fonts change to Times New Roman on other computers?
This happens because the custom font is installed locally on your device but not on the viewer's device. To fix this, you must either use web fonts (for websites) or embed the fonts directly into the file (for PDFs and documents).
Does embedding fonts increase the PDF file size?
Yes, embedding fonts stores the font's character data inside the PDF, which increases the overall file size slightly. However, this ensures your document looks exactly as designed regardless of where it is opened.
Can I use synced Adobe fonts in WPS Office?
Yes. As long as the Adobe fonts are synced through the Creative Cloud desktop app and installed on your local operating system, WPS Office can access them and embed them into your documents or exported PDFs.
What is a fallback font in web design?
A fallback font is a secondary, web-safe font listed in your CSS (like Arial or sans-serif) that the browser will automatically load if the primary custom web font fails to load or is unavailable.
