Hallo in die Runde.
Für einen Kunden haben wir mehrere Landingspages erstellt. Nun hat sich die "Mutterfirma" gemeldet, dass bestimmte Adobe-Fonts eingebunden werden.
Alles gar kein problem - wir haben einen Premium Account.
Aber jetzt komme ich an meine Grenzen und finde den Fehler nicht. Die Headlines überimmt er mir super... alles genauso - Schrift top.
Aber die Fließtextschrift macht er mir einfach nicht so wie es soll.
Es hat bestimmt etwas zu tun, dass es über Adobe als Fließtext läuft und bei Zeta nicht, oder?
<style>
<link rel="stylesheet" href="https://use.typekit.net/adk7aix.css">
/* === Adobe Fonts Einbindung === */
/* Fließtext: Proxima Nova */
body, p, label, input, textarea, select, li, td, th, span, div {
font-family: "proxima-nova", sans-serif;
font-weight: 300;
font-style: normal;
}
/* Überschriften: Neue Frutiger World */
h1, h2, h3, h4, h5, h6 {
font-family: "neue-frutiger-world", sans-serif;
font-weight: 400;
font-style: normal;
}
/* Slider, die als erstes Element auf der Seite benötigen andere Abstände und Schriftgrößen etc. */
.topslider .zp13sliderWidget .zp13slider-caption{
font-size: 1.2em;
}
.topslider .zp13sliderWidget .zp13slider-caption h1,
.topslider .zp13sliderWidget .zp13slider-caption h2,
.topslider .zp13sliderWidget .zp13slider-caption h3 {
font-size: 3em;
margin-bottom: .3em;
}
/*Änderung der Hintergrundfarbe des Footers.
#footer ist der Container mit den Links und dem Copyright Text.
#totop ist der Container mit dem ^ Zeichen, das einen an den Anfang der Seite bringt.
color beschreibt die Schriftfarbe,
background-color die Hintergrundfarbe
*/
#search,
#footer,
#totop {
color: #e7e7e7;
background-color: #3e3d3d;
}
/*Änderung der Farbe des ^ Zeichens im Footer.
#totop a ist das ^ Zeichen.
#totop a:hover beschreibt den Zustand, wenn die Maus über dem Zeichen "schwebt"
*/
#totop a {
color: #e7e7e7;
}
#totop a:hover {
color: #F39C12;
}
CSS
<link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-family: "proxima-nova", sans-serif;
font-weight: 400;
font-style: normal;
}
<link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-family: "proxima-nova", sans-serif;
font-weight: 700;
font-style: normal;
}
/* H1-Überschriften */
h1. <link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-family: "neue-frutiger-world", sans-serif;
font-weight: 400;
font-style: bold;
}
h1. <link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-family: "neue-frutiger-world", sans-serif;
font-weight: 400;
font-style: bold;
}
/* H2-Überschriften */
h2. <link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-family: "neue-frutiger-world", sans-serif;
font-weight: 400;
font-style: normal;
}
h2. <link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-family: "neue-frutiger-world", sans-serif;
font-weight: 400;
font-style: normal;
}
/* H3-Überschriften */
h3. <link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-family: "neue-frutiger-world", sans-serif;
font-weight: 400;
font-style: normal;
}
h3. <link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-family: "neue-frutiger-world", sans-serif;
font-weight: 700;
font-style: bold;
}
Verwende den Code mit Vorsicht.
Schritt 2: Feinanpassung der Eigenschaften
Passe die Eigenschaften wie Schriftgröße, Farbe, Zeilenhöhe und Abstand nach deinen Wünschen an. Hier ein Beispiel:
CSS
h1. <link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-size: 2em;
font-weight: 400;
color: #333;
line-height: 1.5;
margin-bottom: 1em;
}
h1. <link rel="stylesheet" href="https://use.typekit.net/adk7aix.css"> {
font-size: 2.4em;
font-weight: 700;
color: #000;
line-height: 1.2;
margin-bottom: 1.5em;
}
</style>
