CODEWITHSUNDEEP
htmlcss
sachin ghute
sachin ghute

Reputation: 3

@font-face Is Not Working Properly

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.

Upvotes: 1

Views: 84

Answers (3)

Jude Gimeno
Jude Gimeno

Reputation: 11

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

Upvotes: 0

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

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

Upvotes: 0

Aditya Ponkshe
Aditya Ponkshe

Reputation: 3890

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

Upvotes: 1

Related Questions