Embedding Fonts in HTML5 Outputs

 Article #: GEN1018Z  Product: Flare   Version: All

Summary:

Below are the instructions for how to embed fonts into an HTML5 output in Flare. Embedding fonts in an output is particularly useful when using custom fonts or other fonts that may not be installed on your end users' machines. This method also works with font formats that are not natively supported in Flare(.woff, .eot, etc.)

Note: This method does not work in print outputs. PDF output will embed fonts automatically, all that is required is for the font to be installed on the machine that is compiling the output.

Full Description:

  1. Create a folder called "Fonts" inside of the Resources folder in your Flare project
  2. Open the Fonts folder in Windows Explorer and add the font file(s) of your choice
  3. In Flare, right-click on the applicable stylesheet and select Open with>Internal Text Editor
  4. Add the CSS code below to the top of the stylesheet, replacing "FONTNAME" with the actual font name:
    5. @font-face {
    font-family: FONTNAME;
    src: url(../Fonts/FONTNAME.ttf);
}

    Note: The source URL for the font in this example assumes that the stylesheet is in the Resources>Stylesheets folder, if it is in a different location the relative path may be different. The font-family value is arbitrary, it does not need to match the name of the font. If there are any spaces in the font-family name or source URL, wrap the name or URL in single quotes.

  5. Apply the font-family value, set in the previous step, to any style classes that will use the embedded font. DO NOT select the font-family from the list of installed fonts, this will reference the installed font rather than the embedded font, instead type the name in manually
  6. Build the output and confirm that the font is embedded and working as expected

Optional:

The steps below are only required if you intend to use an embedded font for text within the skin elements in the Tripane output.

  1. Apply the font-family value, set in step 4, to elements in the Tripane skin via the Skin's Styles tab. DO NOT select the font-family from the list of installed fonts, this will reference the installed font rather than the embedded font, instead type the name in manually
  2. Build the Tripane target and open the output folder in Windows Explorer
  3. Navigate to Skins\Default\Stylesheets and open Styles.css in a text editor
  4. Repeat step 4 but change the relative path so that it points from the location of Styles.css to the font within the output. For this example it would look like this:
    5. @font-face {
    font-family: FONTNAME;
    src: url(../../../Content/Resources/Fonts/FONTNAME.ttf);
}
  5. Open the output and confirm that the font is working in the skin

 

Additional Information:

If the target option "Exclude content not linked directly or indirectly from the target" is enabled the font will likely be removed from the output. In this case the suggested workaround is to insert a link to the embedded font in a masterpage and hide the link using the "display: none;" CSS property.

For more information on @font-face please visit the resources below.

http://www.font-face.com

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Attribution:

Last updated:

April 28, 2017

Author:

Steven Moreno

Contributions by: