• Pricing
  • Teams
  1. Home
  2. PDF Converter
  3. How to Convert PDF Documents
  4. HTML to PDF Conversion with Custom Fonts

HTML to PDF Conversion with Custom Fonts

by David Beníček

A PDF with a custom font can lose its style after conversion. Follow these steps to keep your fonts intact when saving HTML as a PDF.

A PDF with a custom font can lose its style after conversion. Follow these steps to keep your fonts intact when saving HTML as a PDF.

Some fonts load from the web (like Google Fonts), while others are installed on your computer. When you print or save as a PDF, browsers don’t always carry over those fonts unless they’re properly embedded. That’s why your stylish HTML fonts sometimes get replaced with generic ones.

What Happens to Custom Fonts When Converting HTML to PDF?

Browsers handle fonts differently when turning an HTML page into a PDF. Standard system fonts and many open source web fonts usually work fine while viewing the page, but they aren’t always saved when printing. Instead, the browser might swap them out for something more basic.

Local fonts installed on your computer might work, but only if they’re accessible during the conversion process. If the browser can’t properly reference the font, it won’t appear in the final PDF.

The difference? Embedding vs. displaying. If a font is only being displayed and not embedded, it won’t be stored in the PDF file itself.

How to Save an HTML Page as a PDF Without Losing Custom Fonts

If you want to try keep your custom fonts in HTML intact when saving a webpage as a PDF, follow the same steps as for saving a web page as a PDF:

  1. Open the webpage in your browser.
  2. Press Ctrl + P (Windows) or Cmd + P (Mac) to open the print menu.
  3. Choose “Save as PDF” as your printer or destination.
  4. Scroll through the document in the preview pane, checking if the custom font is in place.
  5. If things don’t look right, click “More settings” (or a similar option, depending on the browser).
  6. Look for an option like “Print backgrounds” or “Background graphics” and make sure it’s enabled.
  7. Save the file and check again if the fonts look correct.
Saving a web page as a PDF with custom fonts intact

Saving a web page as a PDF with custom fonts intact

This works sometimes, but browsers don’t always handle font embedding well. If your HTML font size, color, or typeface changes in the final PDF, you might need to convert the document using PDF Converter.

Converting a PDF to Word or Other Formats

If you need to edit your PDF to fix missing custom fonts, the first step is to convert the PDF into Word. Using Smallpdf, this process is quick and simple.

  1. Upload your PDF to our PDF Converter.
  2. Select the conversion option, Word, Excel, or PowerPoint.
  3. Let the tool do the work.
  4. Once the file is ready, download it and open it in Word or Google Docs.

What Happens to Custom Fonts During Conversion?

When converting a PDF to Word, the text formatting should stay the same, but the custom font will be replaced with a system default font. This happens even if the custom font was embedded in the original PDF. This happens because Word can only display fonts that are installed on your computer. If you don’t have the custom font on your computer, you will need to first find it, download it, and install it. More on how to do this later.

Replacing the Default Font with Your Custom Font

First, check if the custom font is installed on your system. If it is, select the text in Word and change it back to your original font from the font menu. If the font isn’t installed, you’ll need to download and install it before making any changes.

How to Download and Install Custom Fonts for Better PDF Compatibility

If you don’t have the custom font installed on your system, you will first need to install it. You can usually identify the font by right-clicking on the text in your browser. Select “Inspect” or “Inspect Element.” This will open the Inspector below or to the side of the web page. Look for the “Style” panel; the name of the font will be shown next to the “font-family” element.

Identifying custom fonts used on web pages

Identifying custom fonts used on web pages

Look at reliable sources for custom fonts, such as Google Fonts or established font repositories like MyFonts. Always download fonts from reputable sites to avoid issues with compatibility or licensing. You should be prepared to pay a licensing fee to use many custom fonts.

Installing Custom Fonts on Your System

Once downloaded, installing a font is easy. On Windows, right-click the font file and select “Install.” On Mac, double-click the font file and click “Install” in the font preview pane. The font will then be available for use in Word, Docs, LibreOffice, and other applications.

Best Practices for Preserving Fonts in PDFs

Not all fonts work well in PDFs. Standard fonts like Arial, Times New Roman, and embedded Google Fonts are more likely to be preserved when saving or converting files. If you’re using a custom font, check if it supports embedding before conversion.

Always open and review your PDF with custom fonts after conversion. If any fonts look different, check your settings and install missing fonts before finalizing the document. If you have the custom font installed on your system but it doesn’t show up in the PDF, try converting the PDF first, then editing it in Word to use your preferred font.

David Beníček – Product & Engineering Manager
David Beníček
Product & Engineering Manager @Smallpdf