Skip to Content
CustomizeRepository UIBrandingFonts

Fonts easy

This section explains how to customize typography in an NRP Invenio repository, following the InvenioRDM theming guidelines described in the InvenioRDM Fonts Documentation . You can use any custom font as long as you provide the files and declare them in your LESS theme.

Provide font assets

Place your font files inside your repository-level assets folder.
In NRP Invenio, this follows the InvenioRDM structure:

            • my-font.ttf
            • my-heading-font.ttf
cp {my-font.ttf,my-heading-font.ttf} myrepo/assets/semantic-ui/less/fonts/

Configure @font-face rules

Define the fonts in your global stylesheet overrides, typically in your Global stylesheet file:

/assets/semantic-ui/less/site/globals/site.overrides
@font-face {
  font-family: 'MyFont';
  src: url("~@less/fonts/my-font.ttf");
}
 
@font-face {
  font-family: 'MyHeading';
  src: url("~@less/fonts/my-heading-font.ttf");
}

Apply fonts in your theme

You can now apply your custom font to any global or component-level styles. Global typography override (for the entire site):

html {
  font-family: "MyFont";
}

Component-specific typography (e.g., Semantic UI Headers):

.ui.header {
  font-family: "MyHeading";
}
Last updated on
AssetsTemplating