0

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!

Flippowitsch
  • 315
  • 3
  • 15

1 Answers1

0

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?

Shuryno
  • 532
  • 3
  • 13
  • 1
    Thanks a lot, it was the typo with the path "fonts" vs. "font". With the correct path it even works without the `format('truetype')`. So, what is this even for? – Flippowitsch Jul 18 '22 at 14:23
  • They say : To provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a format() function. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face I guess its not needed and the explanation is pretty bland, as its too often the case on why something like that is doing. – Shuryno Jul 18 '22 at 14:51