Outputs Supported
You can embed fonts into HTML5 output. This is beneficial when using custom fonts (e.g., Google fonts, Adobe fonts, or other web fonts) that may not be installed locally on a user's computer. This method works with font types that are not natively supported in Flare (e.g., WOFF, EOT).
[Menu Proxy — Headings — Online — Depth3 ]
How to Embed Fonts
-
In the Content Explorer, select the Resources folder and create a subfolder, naming it Fonts.
-
In Windows Explorer, open the Fonts folder and add (e.g., copy and paste) the font file(s).
-
In Flare, navigate to the appropriate stylesheet in the Content Explorer, right-click it, and select Open with > Internal Text Editor.
-
Add the following CSS code to the top of the stylesheet, replacing "FONT NAME" with the actual font name.
Copy@font-face
{
font-family: 'FONT NAME';
src: url(../Fonts/FONT-NAME.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.
-
Add the font-family value—set in the previous step—to any styles that will use the embedded font. Do not select the font-family from the list of installed fonts, because doing this will reference the installed font rather than the embedded font. Instead, type the name manually.
- Build the output and confirm that the font is embedded and working as expected.
How to Add Embedded Fonts to Skins in HTML5 Tripane Output
The following steps are required only if you intend to use an embedded font for text within skin elements in HTML5 Tripane output.
- Open the Skin Editor for a Tripane skin, select the Styles tab, and add the font-family value to appropriate elements. Do not select the font-family from the list of installed fonts, because doing this will reference the installed font rather than the embedded font. Instead, type the name manually.
- Build the Tripane target and in Windows Explorer, open the Output folder.
- Navigate to Skins\Default\Stylesheets, and open Styles.css in a text editor.
-
Repeat step 4 from above, but change the relative path so that it points from the location of Styles.css to the font within the output. For example, it might look as follows.
Copy@font-face
{
font-family: 'FONTNAME';
src: url(../../../Content/Resources/Fonts/FONTNAME.ttf);
} - Open the output and confirm that the font is working in the skin.
What’s Noteworthy?
Note This note addresses installing fonts locally versus embedding fonts in a project. When installing a font, you are downloading a web font from the internet, and saving it locally to where other system fonts are located (e.g., C:\Windows\Fonts). In Flare, the new font will display in the font picker. Embedding a font uses CSS to make sure that Flare recognizes the font family. It is better to embed a downloaded font in the project’s CSS and include the font file in the Resources folder so it will get packaged with the output (e.g., C:\ Projects\Test-Project-Name\Content\Resources\Fonts). For HTML5, it is necessary to have the font file embedded for it to display properly.
Note The process for embedding fonts does not work in print-based outputs. PDF output embeds fonts automatically. The only requirement is that the font is installed on the machine that is compiling the output.
Note You can embed a font into any stylesheet. For example, if you are using the branding feature you can embed a font into the Branding.css instead of into the Styles.css. You would insert the @font-face declaration at the top of the Branding stylesheet, and reference it in the --FontFamily variable.
Note If you open the Advanced tab of the Target Editor, select the Content to include drop-down, and choose Content linked directly or indirectly from the target, the embedded 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 template page and hide the link using the "display: none;" CSS property.
