Die Überschriften auf dieser Site bestehen aus einem Font, den ich per CSS eingebunden und entsprechend den Joomla-Klassen zugewiesen habe. Leider benutzen der Internet Explorer von Microsoft und die meisten anderen Browser unterschiedliche Fonttypen. Für die meisten Browser reicht ein True-Type-Font ( TTF) aus. CSS-Styleangaben einbinden. Der IE benötigt aber einen Open-Type-Font ( EOT). Die allermeisten Schriften, die sich im Internet finden, sind TTF-Schriften. Es gibt aber einige Konverter, die einem eine TTF-Datei in eine EOT-Datei wandelt. Einen solchen Konverter findet man beispielsweise hier:
Hat man seine Schriften zusammen, lädt man diese am besten direkt in das CSS-Verzeichnis des Templates und schreibt dann am Anfang der CSS-Datei dieses hier:
/* Für den IE */
@font-face {
font-family:meine_schrift;
src:url();}
/* Für alle anderen Browser */
Dort wo man die Schriftart benutzen möchte, einfach so eingeben, wie in diesem Beispiel bei einer h3-Überschrift:
h3 {
font-family: meine_schrift;}
" meine_schrift " ist ein beliebiges Wort, welches den verwendeten Font kennzeichnet.
Css Schriftart Einbinden De
Auch Pagebuilder wie Beaver Builder, Thrive oder Elementor setzen diese ein. Wenn Du in Deinem Browser (Chrome) rechts klickst, erscheint ein kleines Menü. Hier klickst Du auf "Untersuchen" und bekommst unter "Sources" die extern geladenen Ressourcen angezeigt. In diesem Fall für das Twenty Seventeen Theme die Schriftart Libre Franklin in den Stärken 300, 400, 600, 800 plus die kursive (italic) Variante. Google Fonts lokal einbinden – Schritt für Schritt Anleitung
Erstelle ein Child Theme
Falls Du es noch nicht getan hast: erstelle ein Child Theme. CSS-Schrift mit @font-face einbetten (Fast!). Falls Du das Genesis Framework nutzt, brauchst Du übrigens nichts weiter zu tun, da Genesis grundsätzlich nur mit Child Themes arbeitet. Bei Genesis ist das Entfernen der Google Fonts übrigens ganz easy, mehr dazu später. Fonts herunterladen
Lade Dir die entsprechende Schriftart beim Google Webfonts Helper runter, entpacke sie und kopiere sie in einen Unterordner "fonts" Deines Themes. Das machst Du über FTP, z. B. mit Filezilla. Font im Stylesheet einbinden
Nun kopierst Du Dir den Code vom Google Webfonts Helper und bindest ihn in Deine Datei ein.
Css Schriftart Einbinden 2020
Besser ist es, die font-face-Regeln direkt in die CSS-Datei der Seite oder über ein style-Tag im Kopf der Seite einzubinden. Der Browser zeigt die font-face-Regeln anhand der URL:
Ladbare Schriften: font-face-Regeln für die CSS-Datei @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 300; src: local('Fira Sans Light'), local('FiraSans-Light'), url() format('woff');} @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400;
Mehr zu @font-face
Wenn SVG inline in der Webseite eingebettet ist: Webfonts – ladbare Schriften in SVG
Fonts als Base64 in CSS einbetten
Icon-Font aus SVG-Grafik erstellen
Text in HTML Canvas wird direkt in die Pixel der Bitmap umgewandelt.
Wenn dieser Verweis auf allen Seiten eingefügt ist, dann schlagen sämtliche Angaben der CSS-Datei auf alle HTML-Dokumente durch. 3. Direkte Einbindung beim jeweiligen HTML-Element
Man kann die Style-Angaben auch direkt beim Aufruf des jeweiligen Elements im HTML-Quelltext definieren. Css schriftart einbinden google. Wird der Body geöffnet, dann ergänzen wir
um seine entsprechenden Styleangaben. Das sieht dann so aus:
Auch das ist eine Möglichkeit, sollte jedoch nur im Einzelfall und als Ausnahme angewandt werden. Zum Beispiel dann, wenn eine Formatierung nur äußerst selten oder speziell vorkommt, und es sich nicht lohnt, deshalb die CSS-Datei anzupassen. Grundsätzlich sollten wir soweit möglich das Instrument einer ausgelagerten CSS-Datei nutzen und sämtliche CSS-Styleangaben in einer externen CSS-Datei hinterlegen. Schließlich ist unser Ziel ein knackig kurzer und übersichtlicher Quelltext, möglichst ohne Formatierungen. Dafür haben wir ja unsere CSS-Datei.