dimanche 26 juin 2016

Thin font-weight does not apply to fonts in other languages

While I can apply heavy (400+) weights to languages other than English (Hebrew at the moment) I cannot do so with light weights (300 and lower)

HTML

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>

<div>
  <h6>Hello to you<h6>
  <p class="light">Selling you something with elegant font weight contrast.</p
  </div>
  <h6 class="rtl">שלום לכם<h6>
    <p class="light rtl">מוכר לכם משהו אבל באסה כי המשקל לא עובד ככה.</p>

  <h6 class="rtl">שלום לכם<h6>
  <p class="light rtl heavy">מוכר לכם משהו אבל באסה כי המשקל לא עובד ככה.</p  

  </div>

CSS

body {
    font-family: 'Open Sans';
  }
  .light {
    font-weight: 300;
    font-size:18px;
    color:#4c4c4c;
    margin:0;
  }
.heavy {
  font-weight:900;
}
h6 {
  font-size:24px;
  margin:0;
  color:#696f72;
}
div {
  margin:0;
}
.rtl {
  direction:rtl;
}

Code pen example

Aucun commentaire:

Enregistrer un commentaire