1. CPQ
  2. How-To Articles
  3. Configurator Design

Using Fonts in Epicor CPQ

Article last updated:

Use custom fonts in various parts of your CPQ configurator or 3D Scene. Regardless of where you use custom fonts, this document introduces basic concepts you should consider before using custom fonts, different places where those fonts can be stored for use, and how to reference the fonts for use.

Basic Font Concepts

Fonts for use on the web can be in different formats and support different languages.  Consider the following before deciding on your custom font.

  • Can the font be rendered by all web browsers?
    Some newer font formats are not understood by all web browsers.  For example, font files in the .woff format are well-supported, while newer formats like .woff2 and older ones like .tff may not be.  First confirm the type of browser your users have, then use a font which is compatible with your users' devices.  Or just be safe: use a .woff font file.

  • Does the font support the languages you use?
    Epicor CPQ supports all left-to-right double-byte languages – English, Français, Español, Русский,中文, 日本語, etc.  (Right-to-left languages like Hebrew or Arabic are not yet supported.)  If you use a custom font in your theme, ensure the font supports the characters your users need both today and in the future as your application grows.  For example, some fonts don't support Chinese glyphs.  Other fonts, like noto, include the glyphs of many languages, and can display multiple languages simultaneously.

  • Is the font licensed for use on the web?
    Fonts are creative works, like images or music.  You should be sure the font is licensed for use on the web before adding it to your theme.  Any liability from copyright or license infringement is your responsibility.

  • Is the font found only on Windows, leaving devices with other operating systems left out?
    You may want to refer to a font commonly found on one operating system, like Windows.  Remember that this font may not exist on devices using another OS, like Apple or Linux devices.

Using Fonts in Epicor CPQ

To use a custom font, you must perform the following steps in order.

A. Ensure the font is stored in a public location where Epicor CPQ can find it. 

You have two choices.  Use either a public font hosted on the web, or your own private font files stored in the Resources > Media folder.  Both choices are outlined in the next section.


B. Determine the information to find that font: the font name, the stylesheet URL, and the font URL. 

Example 1: using a public font hosted on the web, like Google Fonts

  1. Browse Google Fonts, and find a font you like. While viewing the font, scroll down to see the available styles, such as "Regular 400" or "Bold 700". Click the plus bubble next to the style you would like to use. The plus bubble turns into a minus bubble, and a "Selected family" pane appears on the right.
  2. In the "Selected family" pane, see the stylesheet URL shown in an HTML path starting with https.
  3. See the Font Name shown as "font-family" in javascript surrounded by single quotes.  

    For example, in this screenshot, we can extract a stylesheet URL of
    "https://fonts.googleapis.com/css2?family=Rubik+Mono_One&display=swap"
    and the Font Name of "Rubik Mono One".
  4. To find the font URL, visit the stylesheet URL with your web browser.  You'll see a simple web page appear, with a reference to a font file within.  If you see multiple references, ask your graphic design department for the best one, but usually it's "latin".  Look for a path that includes ".ttf" or ".woff" – that's your font URL.

    For example, we visited the stylesheet URL from the previous step to see this CSS.  Here, we see the latin font URL as highlighted.

  5. You now have the font name, the stylesheet URL, and the font URL. Proceed with the next section to test these parameters.

Example 2: using any other font stored on the web

  1. To use a font stored at any other public web address, you only need to determine the same font URL, font name, and stylesheet URL as shown in the previous example.  If you need help in finding those 3 parameters, consult the font foundry's help files.
  2. You now have the font name, the stylesheet URL, and the font URL. Proceed with the next section to test these parameters.

Example 3: using a font stored in your media folder

Even though there are thousands of free web fonts available on the internet, you may want to use a specific font that is not hosted elsewhere.  In this case, you'll need to host the font yourself by storing it in Epicor CPQ, creating and storing a matching CSS file, and then determining the same 3 parameters of font URL, font name, and stylesheet URL.  In the example below, we store a .ttf file, but other file formats like .woff and .woff2 can also be stored in this same way. 

  1. Upload the *.woff, *.woff2, or *.ttf font file into the Resources > Media folder.  Stay organized and store them in a subfolder, as seen in this example:


  2. Determine the font URL for the font file you just uploaded.
    The syntax is
    https://prodXXkbmax.blob.core.windows.net/YYZZ/{path}
    XX     is your region, such as "us" or "eu"
    YY is your company name, such as "training"
    ZZ is -dev, -test, or simply blank for production
    path is the path to the file

    For example, given the files stored in the screenshot above in the DEMO company's DEV instance in the US region, the font URL would be
    https://produskbmax.blob.core.windows.net/demo-dev/media/demo-fonts/dancingscript.ttf 

  3. Test the font URL. 
    Try pointing your web browser to that path: does it successfully download the file?  If not, check your work before proceeding.
  4. Determine the font name.
    1. Save the font file (the .ttf or .woff or .woff2 file) on your computer, and double-click it to open it. 
    2. Depending on your operating system, a window may open showing you information about the font, including the font name.  Here's an example from Microsoft Windows, showing the name of "Dancing Script":
       
  5. Create a CSS file.
    1. Open a text editor, and create a file based on the following example.
    2. font-family must be the correct spelling of the font name you determined in step 4.
    3. src: url must be the font URL from step 2.
      For example, given the 'Dancing Script' font stored within the TTF file from step 1, and the Font URL from step 2, we would create this CSS file.
    4. Save the file with the extension ".css".

  6. Upload the file into the same folder as your font file in step 1.


  7. You now have the font name, the stylesheet URL, and the font URL. Proceed with the next section to test these parameters.


C. Test the Font Name and the Font URL using the theme form.

Now that you have your font Name and Font URL, test them to be sure they work.  The form found under Settings > Themes can be used to easily test them.  The form gives instant feedback when the correct information is entered.  Once you have confirmed the name and URL of a font you want to use, then proceed to the next section to use that font in your application.

D. Use the font name and font URL in your application.

  1. As a CPQ administrator, display the list of themes under Admin > Settings > Themes.  Click "Add" at the bottom of the list to create a new theme.
  2. Paste the Font URL into the "Custom Font Url" box.
  3. In the "Font" box, paste the Font Name.  Be sure you enter it exactly as you saw in the CSS file referencing the font.  Note that it may be different than the name of the file.  For example, a "Garamond" font file may contain the font named "EC Garamond."
  4. If you enter both terms correctly, when you press tab to exit the "Font" field, you should see the entire UI update immediately to using that font, as shown in the animation below.
  5. If the UI does not update immediately to that font, check your Font Name and Font URL from the previous step.
  6. You can safely close this new theme form without saving it.

Further Reading

The hard part is done!  Now use your font in your application.  The examples below show various ways you can use fonts in Epicor CPQ. 


Was this article helpful?