Fonts: Install and Test - ROES Web

ROES Support Knowledgebase

Install and Verify ROES Web Fonts

Use this article to install fonts for ROES Server, load fonts in ROES Web through CSS imports, and verify that text orders render correctly.

Product: ROES Web / ROES Server Category: Fonts / Text Rendering Audience: Lab / Support Article ID: 44

Common need

A lab needs ROES Web text products to show specific fonts in the browser and render those fonts correctly through ROES Server or the DP2 Agent.

Overview

ROES Web fonts must be available in the web client through CSS, and the same fonts must also be installed on the ROES Server computer so server-side rendering can use them. After installation, create a test order and verify the generated SVG and rendered output.

For step-by-step ROES Server font installation, see knowledgebase article #57.

Install Fonts on the ROES Server Computer

Install the fonts

Download and install the needed font or fonts on the ROES Server computer.

Open the font manager

On Windows, press Windows key + R, enter Fonts, and open the Fonts panel. On Mac, open Applications and run Font Book.

Windows Fonts panel used to verify installed ROES Server fonts.
If this image does not display, open it directly: Fonts_Panel_Windows.png

Mac Font Book used to verify installed ROES Server fonts.
If this image does not display, open it directly: Fonts_Panel_Mac.png

Verify the fonts

Search for the installed fonts and confirm that they return in the search results.

Restart ROES Server

Shut down ROES Server and relaunch it so the new fonts are loaded.

Install Fonts in ROES Web CSS

Add the font by modifying the ROES Web CSS file and adding one or more @import statements. Save the CSS file and upload it to the site.

Google Fonts import examples

@import url('https://fonts.googleapis.com/css?family=Barlow:400,400i,700,700i'); @import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:400,400i,700,700i'); @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i,700,700i'); @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i');

Lab-hosted font import example

@import url('https://www.softworksroes.com/ROES/ROESWeb/configs/MarcRWTest/fonts/Cantarell_Bold.css?family=Cantarell-Bold');

Verify the Font Is Loaded in ROES Web

ROES Web font verification in Chrome Developer Tools.
If this image does not display, open it directly: ROESWeb_Font_Verification.png

Open a text product

Open the ROES Web Client, load a text product into the workspace, and select the text node of that product.

Inspect the font source

Right-click and choose Inspect. In Sources, go to the cloud website the font is loading from. For Google Fonts, this is typically fonts.gstatic.com.

Confirm the font file

Expand the cloud source, then the folder path until the font file appears. Select the font file and confirm the font characters display on the right.

Confirm the font in ROES Web

Select the text node in the ROES Web product and use the font pull-down to verify the font is listed and displays properly.

Google Fonts verification note

For Google Fonts, the font URL can be verified by looking at the imported CSS from fonts.googleapis.com.

Create a Test Order

Create an order using several text nodes and the new font or fonts.
Fill each text node without causing the software to auto-size the text down.
Vary the font size, style, such as bold, italics, and underline, and color. Record the size, style, and color values used for testing.

Complete and Send the Order

Open the order.xml, find the tSPAN node, and examine the SVG values.

The font family, size, and color should match the values entered in the test product text.

font-family:Anton;font-size:20pt;fill:rgb(238, 28, 28)

Render the Text

ROES Server to Disk Printer

ROES Server render uses the SVG to directly render the text into the template. Enqueue the order to a test render and open the rendered files to check for the correct font family, style, color, and size without clipping.

ROES Server to DP2 Agent

The DP2 Agent uses the SVG information in order.xml and renders two images for each text node: a mask image and a text image. These are written to the Client Generated Images folder, and the image paths are added to the job file.

IC: 20000 Ifile: ~\\MACBOOKPRO-2A93\Desktop\MAS_EnsembleFolders\6-ClientGeneratedImages_RS\MarcRWTest_006702\SATextImage_1_Node_20000.jpg~ Maskfile: ~\\MACBOOKPRO-2A93\Desktop\MAS_EnsembleFolders\6-ClientGeneratedImages_RS\MarcRWTest_006702\SATextMaskImage_1_Node_20000.jpg~

Send the same order to the DP2 Agent to create the order in DP2. Then open the order in DP2 and verify the output.

Open the order items window and open the product or products.
Examine the text node and verify the render uses the correct font family, style, size, and color without clipping.

Expected Result

The font should load in ROES Web, be listed in the ROES Web font pull-down, appear correctly in the order SVG, and render correctly through ROES Server or DP2 Agent output without clipping.

Escalation Notes

Confirm the font is installed on the ROES Server computer, not only loaded in ROES Web CSS.
Confirm the ROES Web CSS import is uploaded and reachable.
Use browser Developer Tools to confirm the font file is actually loading.
Verify order.xml SVG font values match the customer’s test text settings.
Render through the final output path, such as Disk Printer or DP2 Agent, before considering the font fully validated.

Suggested keywords: ROES Web fonts, Google Fonts, CSS import, ROES Server fonts, Font Book, Windows Fonts, font verification, tSPAN, SVG text, DP2 Agent, Client Generated Images, text rendering

Suggested knowledgebase articles: