Google Fonts: Unterschied zwischen den Versionen

Aus Mediawiki Ferdinand Gruber
Zur Navigation springen Zur Suche springen
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 5: Zeile 5:
https://gwfh.mranftl.com/fonts
https://gwfh.mranftl.com/fonts


Joomla:
=== Joomla ===
: Die Font-Dateien werden im Template im Verzeichnis <tt>fonts</tt> gespeichert.
: Die Font-Dateien werden im Template im Verzeichnis <tt>fonts</tt> gespeichert.
Der CSS Code wird in die CSS-Datei des Templates eingefügt - am besten in <tt>user.css</tt>
Der CSS Code wird in die CSS-Datei des Templates eingefügt - am besten in <tt>user.css</tt>
Zeile 15: Zeile 15:
Nach dem Entpacken kann man die Dateien in das Format <tt>WOFF</tt> konvertieren: https://convertio.co/de/ttf-woff/
Nach dem Entpacken kann man die Dateien in das Format <tt>WOFF</tt> konvertieren: https://convertio.co/de/ttf-woff/


CSS Code (für Joomla) in <tt>user.css</tt>:
CSS Code für Joomla in <tt>user.css</tt>:
@font-face {
@font-face {
     font-family: "OpenSans_light";
     font-family: "OpenSans_light";

Version vom 30. Dezember 2024, 22:48 Uhr

Das Einbinden von Google Fonts in eine Website ist möglicherweise nicht mehr datenschutzkonform, da die IP-Adresse des Benutzers an Google übermittelt wird.

Man kann die Google Fonts auch über den eigenen Webspace in die Seite einbinden. Auf folgender Seite kann man einen oder mehrere Google Fonts downloaden und den notwendigen CSS Code direkt von der Seite kopieren.

https://gwfh.mranftl.com/fonts

Joomla

Die Font-Dateien werden im Template im Verzeichnis fonts gespeichert.

Der CSS Code wird in die CSS-Datei des Templates eingefügt - am besten in user.css

Troubles

Open Sanc Condensed

Der Font Open Sans Condensed" wird auf obiger Seite nicht angeboten. Diese Fontfamilie habe ich hier im TTF Format gefunden: https://www.fontsquirrel.com/fonts/open-sans-condensed Nach dem Entpacken kann man die Dateien in das Format WOFF konvertieren: https://convertio.co/de/ttf-woff/

CSS Code für Joomla in user.css: @font-face {

   font-family: "OpenSans_light";
   src: url('../Fonts/OpenSans-CondLight.woff') format('woff');
   font-weight: var(--cassiopeia-font-weight-headings,400);
   text-transform:uppercase;

} Anwendung für Überschriften

h1, h2, h3, h4 { font-family: "OpenSans_light", Arial, sans-serif; }