Custom Fonts in Lectora Desktop

The instructions in our Blog article here https://blog.elearningbrothers.com/3-ways-to-use-custom-fonts-in-lectora are excellent.  The steps to embed fonts use one of Lectora's greatest strengths, HTML Extensions, a feature to incorporate external programming into your project.

Please note that not all font files work on all browsers, so our general recommendation is to only use web-safe fonts, such as serif (Times New Roman) or sans serif (Arial or Verdana).  These are guaranteed to work on all browsers on all devices.  The table below (courtesy of fontsquirrel.com) lists the most recent font file types, note that WOFF formats are the current recommendation.

Browser Formats:
WOFF - Recommended, works in all modern browsers
TTF - Not recommended, replaced by WOFF
EOT - Not recommended, only necessary for IE older than IE9
SVG - No longer supported or required for any browser

Also important to know is that Windows operating systems do NOT use WOFF format for fonts on your machine.  This complicates matters by requiring that at least 2 font files are downloaded to your system to achieve WYSIWYG.

First, locate your desired font.
Download / copy both the .woff and .ttf font files to your local system
Locate the .ttf font file and double click to install it on your Windows system

After the font is installed, launch Lectora.  Review the Font selection to find the new font name in your list and apply it to your text items.  This is the first half of embedding custom fonts.  

Second, use the steps below to embed the font into the Lectora course.

Some font vendors provide a stylesheet.css file with the fonts.  
@font-face {
    font-family: 'freebooter_scriptregular';
    src: url('freebooterscript-webfont.woff') format('woff'),
         url('freebooterscript-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Use Lectora menu item Insert, and add web object HTML Extension.  
Click on the Properties tab
Rename the object in Title Explorer to 'Additional Fonts' without quotes
Next select Type Meta tags
Then click on Edit
In the Editor, add the stylesheet.css information similar to above.  
NOTE: The font-family name should be the same text and capitalization as the font itself shows as in the Lectora font selection list.  For example, the filename may be freebooterscriptreg.woff, but the installed name shows Free Booter.  In this case, you would modify the font-family name to be Free Booter.
Save and you are good to go!  Publish to ReviewLink, your LMS, or web server and check it out.

Additional notes: If you have other font files available, then please add them too. Careful to watch that in the code, only the last font line ends with a semi-colon.

Third step:
Select the HTML Object we added named Additional Fonts, click Add additional files, click Add Files and select the font files.  (If you use the folder option, you will need to update the src url in the font-face declaration to have the folder name ie. url('/webfonts/freebooterscript-webfont.woff')
This will embed the files with the project.

Publish and upload to your LMS / webserver.