Einbindung von Custom WebFont in Astra Theme

Hallo zusammen,

um eine spezielle Schriftart in das Astra Theme (+ Spectra page builder) einzubinden, habe ich mittlerweile 2 Plugins getestet: „Custom Fonts“ und „Use Any Font“ leider mit dem Ergebnis, dass die Buchstaben verrutschen und teilweise übereinander liegen.

Daraufhin habe ich begonnen, analog dieser Anleitung des Schriftdesigners, ein Webfont Kit zu erstellen, um ein Style sheet zu implementieren…

You can create a webfont kit with this tool. https://www.fontsquirrel.com/tools/webfont-generator

In the webfonts folder of your webfont kit, you’ll see a number of files in various formats

These include files in TTF, WOFF, EOT and SVG format. Select all of the files in these formats and copy them to your website’s CSS folder. Also copy the stylesheet.css file to that same main CSS folder.

In your website's main HTML folder, link your font’s stylesheet with this code:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

(If you have renamed your font’s stylesheet to something else like, “fonts.css” make sure this line of code reflects that change.) 

@font-face {

font-family: 'capriccioplain';

src: url('capriccio-plain-webfont.eot'); /* IE9+ */ 

src: url('capriccio-plain-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('capriccio-plain-webfont.woff2') format('woff2'), /* Modern browsers */

url('capriccio-plain-webfont.woff') format('woff'), /* Modern browsers */

url('capriccio-plain-webfont.ttf') format('truetype'), /* Most modern web + mobile browsers */

url('capriccio-plain-webfont.svg#capriccioplain') format('svg'); /* iOS Safari 4.1 and below */

}

(Note: If you decide not to include certain formats (such as .svg), simply omit this line in your CSS.) 

Copy the property found in the font-family: parameter (i.e. capriccioplain). You need to use this name to describe your font.

In your main website stylesheet, you can use this font name if you want to add it to a specific css selector. For example, if you’d like to use this font on the h1 tag, create a declaration for h1 in your main stylesheet, like this:

h1 {

font-family: 'capriccioplain';

color: blue;

}

Doch wo implementieren? es gibt mehrere Orte, an denen css Dateien abgelegt werden, welches der richtige Ort ist, entzieht sich meiner Kenntnis und dann kämen noch die Thematiken der Aktivierung und ob diese Implementierung nicht bei der nächsten Aktualisierung überschrieben wird. Ein Child Theme wäre wohl eine mögliche Lösung, aber erst mal würde ich die Schrift gerne vernünftig einbinden, ohne Buchstabensalat. Kann mir jemand einen Tipp geben? Ich bin momentan ratlos…

Grüße ggans