How to Improve Document Previews using Custom Fonts

About

This feature is useful when documents viewed via Smart Previews use custom fonts.

• Custom fonts ensure documents accessed via Smart Previews are viewed with accurate text styles, ensuring complete user satisfaction and understanding.

• If the majority of your documents do not benefit from the addition of custom fonts, this feature does not ultimately better the experience of your users.

• Install supported custom font files (TTF, OTF) by inserting them into a Smart Previews directory, and configuring a .css file to display your custom fonts. Details below.

Prerequisites

• Supported custom font types:
  • TTF
  • OTF
• Smart Previews for SmartHub must be installed and configured
• Custom font files must be installed on the same server as the applications:
  • Smart Previews Import Server
  • Smart Previews Hybrid Component

How to Configure Custom Fonts

Custom fonts are stored in the "Custom Fonts" directory. Use the following instructions to configure your custom fonts.

1. Navigate to the Smart Previews Web Resources installation directory
2. Custom fonts are stored in the "Custom Fonts" directory.
   • This is empty by default (other than a .txt file).
     
     
     
3. Open the file Web.config for editing.
4. Locate the section appsettings/CustomDirectoryPath around line 76 and change the existing path (if needed) to your custom folder's path.
   1. By default, it is mapped to <Smart Previews Web Resources installation directory>/Custom Fonts/
      
      
      
5. Next, complete the configuration either by:

• • Adding a CSS file into the custom directory
  • Adding a set of font files into the custom directory

How to Use a Custom CSS File

1. Navigate to the <Smart Previews Web Resources installation directory>/<custom directory>

2. Add a new CSS file that should have a structure similar to the following code:

   Custom CSS File Example
   Copy

   @font-face {
       font-family: "custom font family name";
       src: url("<custom_font_path>");
       /* other properties */
   }
   
   @font-face { 
       font-family: "other custom font family name"; 
       src: url("<other_custom_font_path>"); 
       /* other properties */ 
   }
   
   /* another @font-face declaration */ 
   /* ... */

Font Files

See the code example above when using the following steps:

1. For each custom font, add a @font-face containing the following information:

   1. font-family is the font name

      1. For TTF and OTF type font files:
         1. Open the file and copy the Font name
   2. src:
      1. Indicates the path (URL) to the custom font.
      2. See the code example above.

How to Use a Font Set

1. Navigate to the <Smart Previews Web Resources installation directory>/Custom Fonts
2. Copy the font files into the directory.