Fonts einbinden

[Gunnar Bittersmann]

@@heinetz

Lato Light und font-weight: normal passt nicht so recht zusammen. Der Light-Schnitt ist font-weight: 300.

Hmmmm. Unter: http://www.latofonts.com/2014/02/27/lato-2-0-released/

... wird die Schrift auch mit font-weight: normal eingebunden. Ich habe das so verstanden, dass der Schnitt aus dem font kommt.

Sicher kann man eine Schriftfamilie auch so einbinden:

@font-face
{
	font-family: Lato Light;
	font-weight: normal;
	font-style: normal;
	src: url(/fonts/LatoLatin-Light.woff2) format("woff2"),
	     url(/fonts/LatoLatin-Light.woff)  format("woff");
}

@font-face
{
	font-family: Lato Light Italic;
	font-weight: normal;
	font-style: normal;
	src: url(/fonts/LatoLatin-LightItalic.woff2) format("woff2"),
	     url(/fonts/LatoLatin-LightItalic.woff)  format("woff");
}

@font-face
{
	font-family: Lato Heavy;
	font-weight: normal;
	font-style: normal;
	src: url(/fonts/LatoLatin-Heavy.woff2) format("woff2"),
	     url(/fonts/LatoLatin-Heavy.woff)  format("woff");
}

:root
{
	font-family: Lato Light, sans-serif;
	font-weight: normal;
	font-style: normal;
}

em, i
{
	font-family: Lato Light Italic, sans-serif;
	font-weight: normal;
	font-style: normal;
}

strong, b, h1, h2, h3, h4, h5, h6, th
{
	font-family: Lato Heavy, sans-serif;
	font-weight: normal;
	font-style: normal;
}

Nur ist das unsinnig. Wenn die Schriftdateien nicht geladen werden, ist nichts kursiv und nichts fett.

So sollte man’s machen:

@font-face
{
	font-family: Lato;
	font-weight: 300;
	font-style: normal;
	src: url(/fonts/LatoLatin-Light.woff2) format("woff2"),
	     url(/fonts/LatoLatin-Light.woff)  format("woff");

}

@font-face
{
	font-family: Lato;
	font-weight: 300;
	font-style: italic;
	src: url(/fonts/LatoLatin-LightItalic.woff2) format("woff2"),
	     url(/fonts/LatoLatin-LightItalic.woff)  format("woff");

}

@font-face
{
	font-family: Lato;
	font-weight: 800;
	font-style: normal;
	src: url(/fonts/LatoLatin-Heavy.woff2) format("woff2"),
	     url(/fonts/LatoLatin-Heavy.woff)  format("woff");

}

:root
{
	font-family: Lato, sans-serif;
	font-weight: 300;
}

strong, b, h1, h2, h3, h4, h5, h6, th
{
	font-weight: 800;
}

Eine Schriftfamilie – ein Name. Und font-weight und font-style in den @font-face-Regeln jeweils richtig angeben.

LLAP 🖖