0

I need to includes the font-faces directly in the DOM, what I'm trying to say is I need to put the font-faces in a tag. I could did it, but now, the fonts looks different

PD: ONLY HAPPENS WITH OPEN SANS FONT

I tried to put different css properties, like font-smoothing

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering: optimizeLegibility;

Update: Well, I found the problem, but not the solution, it's a weird issue. By downloading the "OpenSans-Regular" you can notice it's not only regular, if you put the 

font-weight: bold;

You will able to see a bold weight, but not really the original "OpenSans-Bold", if you download the "OpenSans-Bold" you can see a difference bewtween put

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

font-family: 'Open Sans'; // Actually this is the open sans regular
font-weight: bold;

Results:

AND

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">

font-family: 'Open Sans'; // And this is the original open sans bold
font-weight: bold;

Results:

The second result is bolder than regular (obviously) with font weight 700 Does anyone know what this behavior is due to? I need to use the bold of the Regular and the original bold of "OpenSans-Bold" (both of them in the same website). Thanks in advance.

(Friendly reminder! I'm not using google fonts API, just for example purpose -but I downloaded manually OpenSans from it-)

Alan Sosa
  • 1
  • 2
  • Possible duplicate of [Open Sans Google Web Fonts Rendering in Chrome](https://stackoverflow.com/questions/13114417/open-sans-google-web-fonts-rendering-in-chrome) – Daniel Vercouteren Jul 15 '19 at 19:47
  • Hi Daniel, well, actually I'm not using google fonts, but I'm using the manually version of open sans (I downloaded it from google fonts). But before the refactor the fonts were rendering well. I mean, it's the same browser, the same font, the weight but not the same results. In "production" the font looks "higher". Thank you very much! – Alan Sosa Jul 15 '19 at 21:43
  • Why don't you show us your actual `@font-face` code, rather than the "sample" code you provide. I suspect that your code is linking to an incorrect font file — it's very close; however, the "C" glyph has quite different curves. Maybe? – Parapluie Jul 16 '19 at 20:56
  • @Parapluie Because the problem is not the `@font-face`. I use the same font-faces that google uses. But with different src, I checked a lot of times my src and the weight, but all is ok, I use that sample because is the same thing, you can test in a index.html and put the google fonts and use it in a style tag. You will see what I'm talking about, the problems is not the way the font is loaded. Regular font of "Open Sans" includes a "bold" (which is different from open sans BOLD) version that does not appear in file of @font-face. Have a nice day!! – Alan Sosa Jul 18 '19 at 18:08

0 Answers0