Add font style with css

Question

I have these fonts style added to my my page

    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
    <link href='https://fonts.googleapis.com/css?family=Philosopher:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />

How can I add them to my page with css so that I do not have these external links in my css

I tried this

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic');
}

but in my console (I use Mlozilla) I got

downloadable font: rejected by sanitizer

In Chrome the error says:

Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic

Then I downloaded the file associated with the Roboto font and tried

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../content/fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

But nothing happens.

Answer 1

You can go to each google font link and save it to a css file with any name like:

Go to this link then copy and save to a text file named roboto and change the .txt to .css (roboto.css)

https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic

Then add this css file to your html like:

<link href='roboto.css' rel='stylesheet' type='text/css'>

and do similarly for every google font link.

For linking woff2 file locally for example visit this link, font will get downloaded, save it in a fonts named folder with name opensans-light.woff2

https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2

then use it like

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/opensans-light.woff2) format('woff2');
}

Answer 2

You can use @import rule for CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic');

Import like this in the head of you CSS file and everything will work