Enabling custom fonts

Your own custom fonts can be used in a project. This allows you to ensure that the fonts you use within project will properly display in your users' browsers regardless of whether they have the font locally installed.

You can also include fonts from font libraries, like https://fonts.google.com/ and https://fontlibrary.org/.

You will need the font file for each font you want to enable.

•

The custom fonts you enable are defined based on the @font-face CSS at-rule that you provide in a HTML Extension object in 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 that must be inserted into the project can be saved as a library object. This allows you to easily share the library object with your colleagues. For details about library objects, see Working with library objects.

Defining fonts from a library

To define fonts from a font library:

  1. Insert a HTML Extension object at the project level and name it "Additional Fonts". For details about inserting HTML objects, see Working with HTML extension objects.

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

  3. Open a Web browser and go to the font library, for example https://fonts.google.com/. The following font libraries are supported:

  4. Follow the on-screen instructions for properly updating the HTML extension from the font library Web site, similar to Step 4 above. To continue the Google example, click the corresponding Add button, then copy and paste the standard link string into the HTML extension. For example, to add Kavivanar, click the corresponding Add button for Kavivanar, copy the following link:
    <link href="https://fonts.googleapis.com/css?family=Kavivanar" rel="stylesheet">

  5. Click Edit. In the Editor window, paste the Kavivanar link as the definition of the font, similar to Step 4 above. When you are done copying and pasting Google fonts, click Save and Close.

  6. Save and reload the project to show the new fonts in use.

Defining a custom font

To define a custom font for use within project:

  1. Insert a HTML Extension object at the project level and name it "Additional Fonts". For details about inserting HTML objects, see Working with HTML extension objects.

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

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

  4. 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:

    <style>
    @font-face {
      font-family: fontfamily;
      src: url('fontname.ext') format('opentype');
    }
    </style>

    where fontfamily is the name of the font family and fontname.ext is the font file.

    For example:

    <style>
    @font-face {
      font-family: ACME Font;
      src: url('ACME.ttf')format('opentype');
    }
    </style>

    •

    The ACME example shows .ttf format. You can also use .woff format:

    src: url('ACME.woff') format ('woff');

  5. Save the project and reload the project to show the new font in use.

The font is enabled within the project.

Aggregate the font variations

To limit the font list to only the base fonts, modify the font-face mapping, as follows:

<style>
@font-face
  font-family: My New Font;
  src: url('MyNewFont.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: My New Font;
  src: url('MyNewFont_Bold.ttf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: My New Font;
  src: url('MyNewFont_Italic.ttf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: My New Font;
  src: url('MyNewFont_BdIt.ttf') format('opentype');
  font-weight: bold;
  font-style: italic;
}
</style>

Error Checking

The font face mapping data in HTML Extension has references to resource files (font files) that need to be added to the Additional Files section of thet HTML extension. During project load, it verifies that those files exist in Additional Files. You will be notified if any of the files are missing. You can simulate this by deleting some files from Additional Files and reloading the project.

Knowledge Base | Training | Support
© Copyright ELB Learning 2025