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.

http://stackoverflow.com/questions/35203696/source-sans-pro-font-in-html/35204067#35204067 — Igor Ivancha, Feb 05 '17 at 13:33

Ambrish Pathak · Accepted Answer · 2017-02-05T13:22:36.277

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');
}

IIRC, Google uses user agent sniffing to serve different CSS files depending on the browser. — Jed Fox, Feb 05 '17 at 13:30
@J F , what do you mean, I didn,t get this one .... How does this affect the way I include fonts? — Dimentica, Feb 05 '17 at 13:56

score 2 · Answer 2 · answered Feb 06 '17 at 11:48

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

answered Feb 06 '17 at 11:48

Giorgi Parunov

71
2

score 1 · Answer 3 · answered Feb 05 '17 at 13:19

1

It's simple

open the link in the href method inside your <link> tags

eg https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic
the copy the css style you like
Paste it in your .css file

answered Feb 05 '17 at 13:19

Manish Poduval

452
3
15

Add font style with css

3 Answers3