@font-face Is Not Working Properly

Question

I am using the Open Sans font from Google fonts in my application using this import rule:

http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"

When testing locally and I have no internet connection, the font no longer works.

What I have tried:

I have downloaded this font and set it up inside of my CSS file for @font-face, but it shows all characters are different.

did you download correct fonts and adding right font family in your css? — Shakir Khan, Feb 19 '16 at 05:20
Are you using `https`? If then, just remove `http:` in above import url. — Alfred Woo, Feb 19 '16 at 06:28
Check out https://stackoverflow.com/questions/42708257/google-fonts-webpack/48310258#48310258 — Pace, Jan 17 '18 at 21:28

score 1 · Answer 1 · answered Feb 19 '16 at 05:11

To fix your issue.

1.You first have to download the .ttf file from google fonts.

2.Put that file in your project and then add following to your css.

3.In url, specify the path of your .ttf file.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url('your link to .ttf file') format('woff2');
}

score 0 · Answer 2 · answered Feb 19 '16 at 05:53

0

use below code to import Google Web Font in CSS file.

    @import url('http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800%22');

answered Feb 19 '16 at 05:53

Iqbal Pasha

1,318
1
8
12

if you are not having internet @import will not work if you want it to work follow the steps as given by "Aditya Ponkshe" – Iqbal Pasha Feb 19 '16 at 05:59

score 0 · Answer 3 · answered Feb 19 '16 at 06:31

0

1st put this inside your head tag

  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800%22' rel='stylesheet' type='text/css' />

All you need to do is add the font name to your CSS styles. For example:

h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }

answered Feb 19 '16 at 06:31

Jude Gimeno

11
6

this is online link i want offline font like a... @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url('your link to .ttf file') format('woff2'); } this type...... – sachin ghute Feb 19 '16 at 12:38

@font-face Is Not Working Properly

3 Answers3