Defining Custom Fonts in Lectora Online

Defining custom fonts in your project allows you to ensure that the fonts you use within your project will properly display in your users' browsers regardless of whether they have the font locally installed.

You can either define the custom font with the font file or include fonts from font libraries such as, fonts.google.com/ or fontlibrary.org/.

The custom fonts you enable are defined based on the @font-face CSS at-rule that you provide in a HTML Extension object in your project. The rule allows for linking to fonts that are fetched and activated when needed. Provide multiple @font-face rules to construct font families with a variety of faces.

The Lectora custom fonts HTML Extension object can be saved as a library object. This allows you to easily share the custom fonts with your colleagues to keep consistency across your team's projects. 

Defining fonts from a library

To define fonts from a font library:

Insert a HTML Extension object at the project level and name it "Additional Fonts". Be sure to match this  text exactly, capitalization and all. To make this easier, I’ll put text you can copy and paste in the description below. 

In the Properties tab for the HTML Extension, specify the Type as Meta tags.

Open a Web browser and go to the font library, for example https://fonts.google.com/. You’ll find a full list of supported font libraries in the description below. 

https://fonts.google.com/

https://fontlibrary.org/

https://www.theleagueofmoveabletype.com/

http://www.losttype.com/about/

Each font library will have different steps to follow to access the information needed to link the font. Follow the on screen instructions for your chosen font library. 

With this  Google example, click the corresponding Add  button, then copy and paste the standard link string into the HTML extension.

Back in Lectora Online Click  Edit on the properties tab of your HTML Extension object. In the Editor window, paste the Roboto link as the definition of the font. When you are done copying any additional fonts, click Save and Close.

Now, Manually Save and reload the project.  

When you reload the project it will show the new fonts in use.

Defining a custom font using a font file

To define a custom font using a font file for use within your project:

Insert a HTML Extension object at the project level and name it "Additional Fonts". Again, be sure to match this text exactly. 

In the Properties tab for the HTML Extension, specify the Type as Meta tags.

Next specify the definition for the font. This defines the font to the browser for users that may not have the font currently installed. To specify the definition, click  Edit. In the Editor window, specify the following and click Save, You will find this template below:

<style>

@font-face {

  font-family: fontfamily;

  src: url('fontname.ext') format('opentype');

}

</style>

Within this definition fontfamily is the name of the font family and fontname.ext is the font file.

For example:

<style>

@font-face {

  font-family: Roboto Slab Font;

  src: url('robotoslab.ttf')format('opentype');

}

</style>

When you are finished click Save and Close

To associate the corresponding font file, click Additional Files. Click Add File and browse to add the font file to the project.

Now Manually Save and reload the project 

Now the project will show the new font in use.

This article was last updated May, 2021. The software may have changed since the last review.