Background color and font weight correct in the source code but not applied

Why it is impossible to manage font weight as we would it?

In quick css, i wrote :
h1 {
font-style: italic;
font-weight: 900 !important;
}
h2, h3 {
font-style: normal;
font-weight: 600 !important;
}
h4, h5, h6 {
font-style: normal;
font-weight: 400 !important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
text-transform: none;
}

Then you can manage as you want weights…

btw. just for info:
raleway is one of those google fonts that could be used with variable font option – if you are loading that font by yourself. Best would be to load it local.
Some nice info on that: https://web.dev/variable-fonts/

if you have done that – it will be possible to have styles like:
f.e.

h1 {
line-height: 1.7em;
font-size: 3.8em;
font-variation-settings: "wght" 443;
}

you can download this varialble font on google fonts: https://fonts.google.com/specimen/Raleway?query=Raleway – but these fonts are ttf fonts.
it is a little bit tricky to convert those downloadable files to woff2 fonts under preservation of those varialbe fonts options. But there are good converter tools in the net.

Vimeo Video
in Action: https://webers-testseite.de/pureinstall/oswald/

Nein – ist leider nicht so trivial.
Am Mac ( ist ja ohnehin quasi “Linux-Basiert”) einige Terminal Tools die wunderbar diese ttf unter einhaltung der variable Fonts generieren.
Die Zukunft wird wohl dahin gehen – man sollte allerdings ein Fallback für die ewig gestrigen bereit stellen.

heißt man lädt schon auch die Schriftschnitte die man möchte ( zB: 300, 400, 700) und diese variablen Font als woff2
man macht dann sozusagen im quick css eine weiche ähnlich den media-querries.
wobei ich dann die Sachen via einer Klasse die ich einem Eltern Element zuweise setze z.B:

hiervor kommen die normalen Definitionen wie üblich dann jedoch :
lies zB: http://clagnut.com/blog/2390/

@supports (font-variation-settings: normal) {
  .raleway-var .av-special-heading-tag {
      font-family: 'Raleway Variable',sans-serif;
      font-variation-settings: "wght" 600;
      line-height: 2em;
      letter-spacing: 0.05em !important;
      font-style: normal;
      font-size: 3em;
  }
  .raleway-italic-var .av-special-heading-tag {
      font-family: 'Raleway Italic Variable',sans-serif;
      font-variation-settings: "wght" 600;
      line-height: 2em;
      letter-spacing: 0.05em !important;
      font-style: normal;  /*** da es ja am Schriftschnitt schon als italic gesetzt ist ***/
      font-size: 3em;
  }
}

eingebunden werden die normalen Fonts und die variablen via z.B:

@font-face{
  font-family:'Raleway Variable';
  font-weight:100 900;
  src:url(../fonts/Raleway-VariableFont_wght.woff2) format('woff2')
}
@font-face{
  font-family:'Raleway Italic Variable';
  font-weight:100 900;
  src:url(../fonts/Raleway-Italic-VariableFont_wght.woff2) format('woff2')
}

die 100 900 sind die Spanne mit der gesetzt werden kann.

nach dem Converter musst du mal Googlen variable ttf nach varialbe woff2 z.B

• This reply was modified 3 years, 10 months ago by Guenni007.