ROES Web - Fonts: Hosting a Font on Your Website

ADDING A LAB HOSTED FONT FOR ROESWEB

===================================

 **If you already own a font, use Font Squirel to Generate css and convert that font to a webfont: https://www.fontsquirrel.com/tools/webfont-generator **

1. Add the font file to your website or server (England Signature.ttf).  Font format may be either True Type (ttf) or Web Open Font Format (woff/woff2).  

2. Record the url to the font (https://www.roesu.com/Fonts/England Signature.ttf).

3. Create a .css file that contains the source url to the font and the format type (England Signature.css); format values ('truetype', 'embedded-opentype', 'woff', '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 modified CSS file to your website or server.

5. Add an @import statement to the ROES Web Client overriding CSS file (@import url('https://www.roesu.com/Fonts/England Signature.css?family=England Signature');), save and upload.

6. Open Chrome, go to your ROES Web Client, right click on the page and choose 'Inspect'.

7. Clear the web cache and select 'Sources' from the top task bar then find the cloud icon that has your website URL.

8. Expand that section and drill down to the website you stored the font and the CSS files

9. Verify the 'font' folder exists.

*Any font you add to the ROES Web Client must be installed on the computer(s) running the 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 is rendered in ROES Server.  If there is a mismatch, you may not be able to use the font*

Be sure your web server is set to allow access to fonts being served and satifies CORS (Cross Origin Resource Sharing).  This may require a change  in the .htaccess file and/or the MIMETypes.

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 your htaccess file.  Usually found in your website root directory (i.e. Your public_html ".htaccess" file)

# Apache config limits to font file type extensions

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

-OR-

# Adds more file type extensions (css and js)

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

-OR-

# 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>

-OR-

# Sharing for multiple websites (Also checks to see if 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, you can check using the curl utility:

$ curl -I https://some.otherdomain.net/fonts/somefont.ttf

$ curl -I https://some.otherdomain.net/fonts/somefontcss.css

-OR-

$ curl -I https://www.roesu.com/Fonts/England Signature.ttf

$ curl -I https://www.roesu.com/Fonts/England Signature.css

$ curl -I https://www.roesu.com/Fonts/England%20Signature.ttf

# 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

================

A more specific result that only shows what we are interested in

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

# Result

Access-Control-Allow-Origin: *

In either check, if you see Access-Control-Allow-Origin: * in the response, you're golden!

MIME.TYPES

===========

To set mime-types for font files, add one or more of these lines to config:

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