@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.

Answer 1

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

Answer 2

使用以下代码在CSS文件中导入Google Web字体。

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

Answer 3

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