How to Load Custom Fonts in RazorLight Templates

[skalahonza]

Hi everyone,

I am using RazorLight for template rendering in my .NET project, and I need to load custom fonts within my RazorLight templates. Here are the steps I've taken so far:

1. Added Custom Fonts:

   • Placed my font files (e.g., .woff, .woff2) in the wwwroot/fonts directory of my project.

2. Defined Fonts in CSS:

   @font-face {
       font-family: 'MyCustomFont';
       src: url('/fonts/MyCustomFont.woff2') format('woff2'),
            url('/fonts/MyCustomFont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   }
   
   body {
       font-family: 'MyCustomFont', sans-serif;
   }
   

Is there any better practice to do this?
I searched the discussion with no luck: https://github.com/toddams/RazorLight/discussions?discussions_q=font

[JuanM-DS]

Hi, can you help me implement this in my project? I’ve been having problems with it.

The font family doesn’t seem to work.

[alekdavis]

I am not an expert here, but what does a template engine have to do with custom fonts or fonts in general? The template engine is only responsible for building the document. It has nothing to do with document rendering. It's not like you are merging the font files right into the document text, right? Your font files exist in some location, so the document should reference them in a way that a rendering engine knew where to get them. But again, unless I am missing something, this is not the question to be addressed by a templating engine.

[skalahonza]

We use a template engine in combination with an HTML-to-PDF tool.