CODEWITHSUNDEEP
cssfontsgoogle-font-api
Reza
Reza

Reputation: 19933

How to remove local from google fonts

I am using google fonts by something like below

url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800);

Result css coming from api is like this

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxhgVThLs8Y7ETJzDCYFCSLE.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Then suppose that user has a different style font with same name on his computer, I believe local('Open Sans Light Italic'), local('OpenSans-LightItalic'), will cause that fonts to be loaded

Is there any option in the request to prevent local, and just having url(https://fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxhgVThLs8Y7ETJzDCYFCSLE.woff2) in css

Upvotes: 1

Views: 1450

Answers (1)

P.S.
P.S.

Reputation: 16384

Local fonts are usually placed after needed fonts, so if needed font wasn't render, the local font will be applied. It prevents user from looking at incorrect rendered fonts and so on. I'm looking at @font-face that you posted, and it looks like Open Sans that you're importing is the same, as default Open Sans.

UPDATE

"The problem I am facing is on one computer font is not rendered correctly."

To render fonts properly on all platforms you need to apply this CSS properties:

/* Render fonts properly on all platforms */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

You can apply it to specific tag/class/etc., but the easiest way is to apply it globally to all elements like so:

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

I had the same problem and it helped me. Hope, it will solve your issue too.

Upvotes: 0

Related Questions