ROES Help Desk ROES Help Desk Knowledgebase
Fonts: Hosting a Font on Your Website - ROES Web
Suggested knowledgebase articles:

Fonts: Hosting a Font on Your Website - ROES Web

ROES Support Knowledgebase

Add a Lab-Hosted Font for ROES Web

Use this article to host a font file and CSS file for ROES Web, import the CSS into the ROES Web override CSS, and verify that CORS and MIME settings allow the font to load.

Product: ROES Web Category: Fonts / CSS Audience: Lab / Support Article ID: 60
Common need
A lab wants to use a custom font in ROES Web by hosting the font files and importing a matching CSS file.

Before You Begin

If you already own a font, use Font Squirrel to generate CSS and convert the font to a webfont: Font Squirrel Webfont Generator.

Do not use fonts unless the lab has the right to use and host them.

Add the Lab-Hosted Font

1

Add the font file to the website or server

Upload the font file to the lab website or server. Font format may be TrueType (.ttf) or Web Open Font Format (.woff / .woff2).

Example font file

England Signature.ttf
2

Record the font URL

Record the URL to the hosted font file.

https://www.roesu.com/Fonts/England Signature.ttf
3

Create the font CSS file

Create a .css file that contains the source URL to the font and the format type. Format values include truetype, embedded-opentype, woff, and woff2.

Add a @font-face section to the CSS file for each font-weight and font-style you want to support.

@font-face { font-family: 'England Signature'; src: url('https://www.roesu.com/Fonts/England Signature.ttf') format('truetype'), url('https://www.roesu.com/Fonts/England Signature.woff') format('woff'); url('https://www.roesu.com/Fonts/England Signature.woff2') format('woff2'); font-weight: normal; font-style: normal; }
4

Upload the CSS file

Upload the modified CSS file to the lab website or server.

5

Import the font CSS into the ROES Web override CSS

Add an @import statement to the ROES Web Client overriding CSS file, then save and upload it.

@import url('https://www.roesu.com/Fonts/England Signature.css?family=England Signature');

Verify the Font Loads in Chrome

1

Open ROES Web and Inspect

Open Chrome, go to the ROES Web Client, right-click the page, and choose Inspect.

2

Clear the web cache and open Sources

Clear the web cache, select Sources from the top toolbar, and find the cloud icon that has the website URL.

3

Confirm the font folder exists

Expand the website section, drill down to the location where the font and CSS files are stored, and verify that the font folder exists.

Important ROES Server Font Requirement

Any font added to the ROES Web Client must also be installed on the computer or computers running ROES Server.

Render a template that uses the font in text to verify the added font supports bold or italics. Verify the font displays in ROES Web exactly as it renders in ROES Server. If there is a mismatch, the font may not be usable.

CORS and Server Access

Be sure the web server allows access to hosted fonts and satisfies CORS, or Cross-Origin Resource Sharing. This may require a change in the .htaccess file and/or MIME types.

S3 Settings

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>

.htaccess File

Modify the .htaccess file, usually found in the website root directory, such as the public_html .htaccess file.

Apache config limited to font file extensions

<FilesMatch ".(eot|ttf|otf|woff)"> Header set Access-Control-Allow-Origin "*" </FilesMatch>

Adds more file type extensions, including CSS and JS

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch>

Limits sharing to one website

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$"> Header set Access-Control-Allow-Origin "http://www.roesweb.com/*" </FilesMatch>

Sharing for multiple websites

This example also checks whether the mod_headers module is enabled on Apache.

<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> SetEnvIf Origin "http(s)?://(www\.)?(anotherwebsite.com|cdn.anotherwebsite.com|blahblah.anotherwebsite.com)$" AccessControlAllowOrigin=$0 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin </IfModule> </FilesMatch>

Header Check

To ensure the header is set properly, check with the curl utility.

curl -I https://some.otherdomain.net/fonts/somefont.ttf curl -I https://some.otherdomain.net/fonts/somefontcss.css curl -I https://www.roesu.com/Fonts/England%20Signature.ttf curl -I https://www.roesu.com/Fonts/England%20Signature.css

Example Result

HTTP/1.1 200 OK Date: Wed, 08 Jul 2020 16:34:04 GMT Server: Apache Last-Modified: Wed, 08 Jul 2020 11:06:44 GMT Accept-Ranges: bytes Content-Length: 78656 Vary: Accept-Encoding,User-Agent Access-Control-Allow-Origin: * Content-Type: font/ttf

Header Check 2

This command returns only the header value needed for the font CORS check.

curl -s -I https://www.roesu.com/Fonts/England%20Signature.ttf | grep -i "access-control-allow-origin"

Expected Result

Access-Control-Allow-Origin: *

In either check, if you see Access-Control-Allow-Origin: * in the response, the CORS header is set correctly.

MIME Types

To set MIME types for font files, add one or more of these lines to the server configuration.

AddType application/vnd.ms-fontobject .eot AddType application/x-font-opentype .otf AddType image/svg+xml .svg AddType application/x-font-ttf .ttf AddType application/font-woff .woff AddType application/font-woff2 .woff2

Expected Result

The hosted font and CSS should load in ROES Web, Chrome Sources should show the hosted font location, and the server should return the required CORS header for the font files.

Escalation Notes

  • Confirm the lab has permission to use and host the font.
  • Confirm the font file and CSS file are reachable by URL.
  • Confirm the ROES Web override CSS imports the hosted font CSS.
  • Confirm the font is installed on the ROES Server computer or computers.
  • Confirm the font renders the same in ROES Web and ROES Server, including bold or italic variants if used.
  • Confirm the web server returns Access-Control-Allow-Origin and the correct font MIME types.
Suggested keywords: ROES Web font, lab hosted font, webfont, @font-face, @import, Font Squirrel, CORS, Access-Control-Allow-Origin, .htaccess, MIME types, woff, woff2, ttf

Article Details

Article ID:
60
Category:
Knowledgebase
Views:
1,383