How to display Noto Sans in different weights from GitHub?

Question

I cannot display Noto Sans in different weights (Thin, Regular, Black). I found the .ttf files on GitHub in the noto-fonts/unhinted directory. How can I display those fonts with different weights ?

I'm working on Google Chrome version 71.0.3578.98.

@font-face {
font-family: 'Noto Sans Thin';
font-weight:100;
font-style:normal;
src: url(https://github.com/googlei18n/noto- fonts/blob/master/unhinted/NotoSans-Thin.ttf?raw=true) format('truetype');
}

@font-face {
font-family: 'Noto Sans Regular';
font-weight:400;
font-style:normal;
src: url(https://github.com/googlei18n/noto-fonts/blob/master/unhinted/NotoSans-Regular.ttf?raw=true) format('truetype');
}

@font-face {
font-family: 'Noto Sans Black';
font-weight:900;
font-style:normal;
src: url(https://github.com/googlei18n/noto-fonts/blob/master/unhinted/NotoSans-Black.ttf?raw=true) format('truetype');  
}

.thin{
font-family:'Noto Sans Thin';
}
.black{
font-family:'Noto Sans Black';
}
.regular{
font-family:'Noto Sans Regular';
}


<p class="thin">Thin</p>
<p class="regular">Regular</p>
<p class="black">Black</p>

There is no visual difference between Thin and Regular. I would like to get the same result as here : https://www.google.com/get/noto/#sans-lgc

Answer 1

In short, github does not allow embedding files hosted on their servers for usage on other domains. They have a strict CORS policy and have made it quite clear.

If you want to use those files, you'll need to upload them on your server and link them accordingly.

All Noto fonts are published under the SIL Open Font License (OFL) v1.1, which allows you to copy, modify, and redistribute them if you need to.