Search code examples
fontsblazor-webassembly

How can I add a local font in Blazor?

Currently, I add the font Source Sans Pro via <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet"> but this cannot load the font when the user is offline. So, I would like to add the font as local resource but I cannot make it work. Here is what I tried:

  1. Delete above <link ...>.

  2. Add <link href="css/source-sans-pro/css/source-sans-pro.css" rel="stylesheet" /> to <head></head>.

  3. Add file "source-sans-pro.css" to "wwwroot/css/source-sans-pro/css/" with content

    @font-face {
font-family: 'Source Sans Pro';
src: url('../fonts/SourceSansPro-Regular.ttf');
}

  4. Download font from here and add it to "css/source-sans-pro/font/".

Unfortunately, the font is not Source Sans Pro. What am I doing wrong?

Many thanks!

Solution

  • I think all you are missing is to add a format to the URL property and you have fonts plural in your path, and its singular where you said you uploaded font, so I am not sure if the mistake exists in your project or its only here.

    src: url('../font/SourceSansPro-Regular.ttf') format('truetype');

    How to include a font .ttf using CSS?