Guten Abend zusammen
Vorneweg: ich bin ein DAU in Sachen Webseitenprogrammierung und kriege es einfach nicht hin die Google-Fonts ohne Plugin einzubinden. Die Suche habe ich benutzt, finde jedoch nicht genau das, was ich benötige.
Vorgeschichte
Ich habe mir vor einiger Zeit mit dem twentyseventeen-Theme meine Website (fertig ist aber nur http://www.c-ro.ch/reptiles) neu aufgebaut. Ich hatte mich damals nur oberflächlich mit den Themes, Plugins usw. beschäftigt, da mir das Standard-Theme eigentlich genügt hat. Im Zusammenhang mit der neuen DGVO möchte ich nun die Google-Fonts (welche ich per Plugin eingebunden habe) lokal auf meinem FTP-Server speichern und diese dann von meinem Server aus einbinden. Dazu habe ich die benötigten Schriften (Open Sans und Lato) in den verschiedenen Styles heruntergeladen und auf dem FTP-Server gespeichert. Anschliessend habe ich beim recherchieren herausgefunden, dass ich eigentlich ganz am Anfang ein Child-Theme hätte anlegen sollen, was ich nun heute nachgeholt habe. Im Child-Ordner habe ich die Schriften im Ordner "fonts_google" abgelegt und im style.css (auch im Child-Ordner) die Schriften eingetragen. Das besagte style.css findet ihr im Anhang.
Nun muss ich der Seite ja irgendwie vorgeben, welche Schriften wo und in welcher Grösse verwendet werden sollen. Wie mach ich das? Ich habe heute den ganzen Tag x Tutorials durchforstet, werde aber trotzdem nicht schlauer... So wie ich das verstehe, muss ich den Teil (des Parent-style.css), welcher die Typografie betrifft in das Child-style.css kopieren und anpassen oder nicht? Ich habe das heute versucht und den Typography-Teil aus dem parent css in das child css kopiert und anschliessend unter
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
die Schrift OpenSans-Light eingetragen:
font-family: 'OpenSans-Light', "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
Der Code, welchen ich vom Parent in das Child css übernommen habe:
/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
color: #333;
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.66;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
line-height: 1.4;
margin: 0 0 0.75em;
padding: 1.5em 0 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
padding-top: 0;
}
h1 {
font-size: 24px;
font-size: 1.5rem;
font-weight: 300;
}
h2,
.home.blog .entry-title {
color: #666;
font-size: 20px;
font-size: 1.25rem;
font-weight: 300;
}
h3 {
color: #333;
font-size: 18px;
font-size: 1.125rem;
font-weight: 300;
}
h4 {
color: #333;
font-size: 16px;
font-size: 1rem;
font-weight: 800;
}
h5 {
color: #767676;
font-size: 13px;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
h6 {
color: #333;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 800;
}
p {
margin: 0 0 1.5em;
padding: 0;
}Könnte mir jemand aufzeigen, was ich falsch gemacht habe?
Für Fragen oder bei Unklarheiten stehe ich Euch gerne zur Verfügung.
Danke und Gruss
Chris
