Font Awesome local einbinden

    Hallo zusammen,


    nach vielen Jahren "Homepage-Baukasten" hab ich nun meine erste Joomla-Homepage gebaut. Ich nutze das Template "astroid_template_zero" mit (oder von?) Astroid Framework.
    Die Seite rennt ganz gut (Ladezeiten) und das Template finde ich klasse, deshalb möchte ich dabei bleiben.


    Jede Menge Fragen und Probleme konnte ich schon durch Google oder Lesen hier im Forum klären. So z.B. die Thematik, die Google Web Fonts lokal einzubinden, damit sie nicht mehr aus dem Netz geladen werden (DSGVO und so...).
    Nun ist es aber so, dass mein Template auch noch eine Verbindung zu Font Awesome aufbaut und da die Icons, Symbole usw. runterlädt. Auch das möchte ich unterbinden, da dieses Thema rechtlich wohl genauso eine "Grauzone" ist wie das Problem mit den Google Web Fonts.


    Ich bin kein Profi, aber ich habe mit Chrome feststellen können, dass mein Template zwei Font-Dateien (oder -Ordner) anzapft und die Datei all.css auf dem Server von Font Awesome.

    Diese Dateien hab ich schon auf dem Rechner. Nachdem ich die Verlinkung in der index.php entfernt habe, werden natürlich keine Icons mehr angezeigt im Template bzw. auf meiner Homepage.


    Die Font-Dateien kann ich ja in meine bereits für Google Fonts extra angelegten Fonts-Ordner mit reinkopieren. Oder? Eine custom.css hab ich auch schon (für Google). Aber ich weiß nicht, welchen Code ich jetzt wo eingeben muss, damit sich mein Template die Fonts bzw. Icons local zieht...


    Ich hab da leider bis jetzt nichts gefunden, bei Google nicht und hier auch nicht. Könnte mir da bitte jemand helfen?


    Vielen Dank schon mal :)


    P.S.: Joomla 3.9

    Hi,


    das fontawesome CSS wird/wurde in Zeile 41 der index.php des Templates geladen.


    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v<?php echo AstroidFrameworkConstants::$fontawesome_version; ?>/css/all.css" >


    In der Demo ist das https://use.fontawesome.com/releases/v5.4.2/css/all.css


    Diese Datei kannst du in das /css Verzeichnis des Templates hochladen und es bspw. in Zeile 33 hinter

    $template->loadTemplateCSS('custom.css');

    lokal einbinden per
    $template->loadTemplateCSS('all.css');


    Welche Google Font nutzt du denn?

    Dieses Tool hilft bei der Generierung des CSS:

    https://google-webfonts-helper.herokuapp.com/fonts


    Gruß


    Pascal

    Hallo, Danke schon mal für die schnelle Antwort. Von Google Source Open Sans. Aber das hab ich ja schon local gespeichert und mit eben dem von dir verlinkten Tool hat das auch recht easy geklappt. Google-Fonts-seitig ist also alles schon in Butter.


    Bzgl. Font Awesome: Kann ich den Code (all.css) nicht auch in meine custom.css mit reinkopieren? Der Google-Code ist da ja auch drin und funzt...


    Edit: Bzgl. Google Font hab ich diesen (verweisenden) Code in der custom.css:


    /* source-sans-pro-regular - latin */

    @font-face {

    font-family: 'Source Sans Pro';

    font-style: normal;

    font-weight: 400;

    src: url('../fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */

    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),

    url('../fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('../fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

    url('../fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */

    url('../fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

    url('../fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */

    }


    Und sowas in der Art bräuchte ich ja nun auch für Font Awesome, oder?

    In der zero/css/custom.css sollte folgendes stehen:



    Code
    /* Font Awesome */
@import 'all.css';

/* Google Fonts source-sans-pro-regular - latin */
@font-face {  font-family: 'Source Sans Pro';  font-style: normal;  font-weight: 400;  src: url('../fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),       url('../fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */       url('../fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */       url('../fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */       url('../fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */       url('../fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}


    Vorausgesetzt die zero/css/all.css und zero/fonts/*.eot... sind richtig platziert, müsste alles klappen.



    Hast du einen Link zur Seite?

    Auf der Live Site fehlt nur


    /* Font Awesome */

    @import 'all.css';


    in der custom.css, welches nach /css/all.css hochgeladen wurde. Die darin verlinkten (../webfonts/... kannst du dir im Paket hier runterladen

    https://fontawesome.com/how-to…?using=web-fonts-with-css


    Es reicht also wenn du /webfonts dann noch ins Template Verzeichnis hochlädst.

    Also die beiden Font-Dateien heißen übrigens "fa-regular-400.woff2" und "fa-solid-900.woff2" und liegen im Ordner "Fonts", wo auch die Google Fonts drin sind.

    Bis jetzt funzt es noch nicht. In der Online-Page sind natürlich jetzt keine Icons zu sehen. Die fehlen.

    Welche Font-Dateien es sein sollten, hängt ja vom gewünschten Umfang ab (siehe fontawesome.com - da kannste dir ja das gesamte Fee Paket für die lokale Nutzung herunterladen).


    Ich würde es dann aber schon beim /webfonts/ Verzeichnis Namen belassen, damit du die CSS Dateien nicht anpassen musst.


    Eben nur die geünschte (all.css / solid.css / regular.css) in die custom.css importierst.

    Ich habe nur die 2 Font-Dateien runtergeladen, die auch online "angezapft" wurden. Mehr brauche ich ja - denke ich - nicht für mein Template.


    Und was die css angeht: Da wurde (lt. Chrome Entwicklertool) nur die all.css heruntergeladen. Also habe ich auch nur die runtergeladen und jetzt local verfügbar.

    Ne, also egal wohin ich die Fonts-Dateien kopiere und egal wo ich den von dir genannten Code hineinkopiere: Es klappt nicht.

    Der einzig erkennbare Unterschied: Wenn ich den Code


    /* Font Awesome */

    @import 'all.css';


    in die custom.css schreibe, dann werden dort, wo normal die Icons im Template sind/wären, viereckige Symbole angezeigt. Nehme ich den Code raus, sieht es wieder so aus wie jetzt die Online-Site, also komplett ohne Icons.

    Und alles andere bewirkt gar nichts.


    Trotzdem Danke.

    Werden denn die Font Dateien geladen? Das kannst du ja überprüfen.


    Wie erwähnt, sind die in der all.css eben als "../webfonts/fa-regular-400.woff2 etc. verlinkt.


    Und lade bitte das gesamte /webfonts/ Verzeichnis aus dem Paket in das Template hoch, die verschiedenen Formate werden für die verschiedenen Broser benötigt.

    https://use.fontawesome.com/re…wesome-free-5.5.0-web.zip


    https://developers.google.com/…ebfont-optimization?hl=de

    Die Font-Dateien werden nicht geladen, sonst würden sie ja im Template bzw. auf der Homepage zu sehen sein. Oder hab ich deine Frage jetzt falsch verstanden?


    Hab auch schon das komplette Fontsverzeichnis geladen. Ich probier mal weiter...

    So, hab's geschafft. Nach dieser Anleitung, die eigentlich für Wordpress ist: https://www.marjeta-prah-moses…-und-ueber-css-verwenden/


    Den dort angebenen Beispielpfad

    Code
    <link href="https://deinedomain.de/wp-content/themes/Divi-child/fonts/fontawesome/css/fontawesome-all.css" rel="stylesheet">

    musste ich in meiner Xampp-Installation in


    <link href="http://localhost/tbo_computerservice/templates/astroid_template_zero/fonts/fontawesome/css/all.css" rel="stylesheet">


    abwandeln und wieder in Zeile 41 der index.php einfügen (also da, wo die ursprüngliche Verlinkung zur Font Awesome-Homepage war. Jetzt werden alle Icons perfekt dargestellt.


    Danke nochmal!

    Am allerbesten wäre es, wenn du in der index.php deines Temolates das einfügen würdest:

    Dann kannst du sicher sein dass im richtigen Verzeichnis und im atellen Template gesucht wird (name des css-files kannst du anpassen).


    $this->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/font-awesome.min.css');

    Danke für den Tipp. Allerdings verstehe ich nicht, wo der Vorteil sein soll.

    Wenn ich weiß, wo die Fonts- und die CSS-Datei(en) liegen, dann ist ein direkter Pfad doch besser für das System. Warum sollte ich es bei jedem Seitenaufruf erst danach "suchen" lassen?

    P.S.: Ich habe die Sache übrigens noch weiter vereinfacht, indem ich den Ordner fontawesome (mit Fonts-Datei-Unterordner und css-Unterordner) direkt in das Stammverzeichnis gelegt habe. Somit ist der Pfad in der index.php meines Templates nur noch


    <link href="fontawesome/CSS/all.css" rel="stylesheet">