Websichere Fonts versus Google-Web-Fonts

Websichere Fonts versus Google-Web-Fonts | PSD-Tutorials.de

Erstellt von maginon, 07.02.2019.

  1. maginon

    maginon Noch nicht viel geschrieben Kreativ-Flatrate-User

    Dabei seit:
    20.01.2015
    Beiträge:
    45
    Geschlecht:
    weiblich
    Websichere Fonts versus Google-Web-Fonts
    Hallo Zusammen,
    kann mir bitte mal jemand erklären, was der Unterschied zwischen websicheren Fonts und Google-Web-Fonts ist?
    Ich bin hier jetzt schon 2 h am Suchen im Netz und es wird immer widersprüchlicher.

    Ich weiß, dass es websichere Fonts gibt. Da die i.d.R. sehr eingeschränkt sind, habe ich gesehen, dass es auch noch Google-Web-Fonts gibt. Ich habe gelesen, dass bei denen der Font von Google geladen wird und nicht direkt in der Website eingebunden sein muss usw. usf.
    ABER: Sind diese Google-Fonts automatisch auch websicher, also auf allen Endgeräten problemlos darstellbar?? Dazu habe ich nichts gefunden und wollte das nicht gleichsetzen ohne es wirklich zu wissen. Oder versteht sich das von selbst?
    Da Font-Profis immer davon reden, dass es an wirklich websicheren Fonts vielleicht 7 - 9 Schriften gibt, Google wohl aber über 800 selbst entwickelt hat, kann doch da was nicht stimmen.
    Und um die Verwirrung komplett zu machen: Ähnliches gilt natürlich für Microsoft. Da gibt es doch auch deren eigene Schriften, oder? Wie verhalten die sich?

    Weiß jemand Rat und kann dazu kurz was sagen?
    Das wäre super und würde mir sehr helfen!! Ganz lieben Dank im Voraus!!
    maginon
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. tynick

    tynick nicht mehr oft zu sehen

    471
    Dabei seit:
    29.07.2013
    Beiträge:
    1.599
    Geschlecht:
    männlich
    Software:
    Affinity Photo, HitFilm Pro, Luminar, Aurora HDR, Win 10
    Kameratyp:
    Nikon D5500
    Websichere Fonts versus Google-Web-Fonts
    In aller Kürze: Als websicher gilt ein Font der mit jedem verbreitet genutzem Betriebssystem auf dem Endgerät des Benutzers installiert wird, bzw. dessen aufgerufener Name mit einem installierten Font assoziiert wird. Und das sind tatsächlich nur ein paar. Ein Font der nicht auf dem Gerät des Besuchers installiert ist, kann auch auf einer Website nicht dargestellt werden.
    Es gibt mehrere Möglichkeiten Fonts auf einer Website zu verwenden, die auch "sicher" sind, nur lediglich nicht mit dem Schlagwort "websicher" umschrieben werden.

    Die Sicherheit kann z.B. durch die Nutzung von Fallbacks in einer CSS Anweisung hergestellt werden.
    Code (CSS):
    1. html {
    2.     font-family: 'Mein Verrueckter Font', 'Den kennt auch keiner', Verdana, Helvetica, Arial, sans-serif;
    3. }
    Kann Font 1 nicht gefunden werden, wird Font 2 genutzt. Kann dieser nicht gefunden werden, Font 3, usw.

    Bei der Nutzung von Google-Fonts, werden diese direkt über das Internet eingebunden. Z.B. via import:
    Code (CSS):
    1. @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i');
    2. html {
    3.     font-family: 'Roboto', Arial, sans-serif;
    4. }
    Diese Schriften müssen dann nicht auf dem Gerät des Besuchers installiert sein. Eine Auswahl an Schiftstärken und -stilen kann direkt mit eingebunden werden, sofern von der gewählten Schrift unterstützt. (i steht für kursiv und die Stärke geht von 100 bis 900; wobei i.d.R. 400 die Standardstärke ist und ansonsten die ungeraden Hunderterzahlen genutzt werden. Falls es einmal keine Verbindung zu dem Google-Server geben sollte, ist auch hier ein Fallback sinnvoll.

    Man kann auch Fonts auf den eigenen Webspace laden und diese einbinden. Die Formate otf, ttf, woff und woff2 sollten von allen gängigen Browsern verstanden werden; bei den Formaten eot und svg ist die Auswahl sehr eingeschränkt.
    Beispiel:
    Code (CSS):
    1. @font-face {
    2.     font-family: 'Meine Schrift';
    3.        src: url('pfad/zu/meine-schrift.woff2')  format('woff2'),
    4.             url('pfad/zu/meine-schrift.woff')  format('woff'),
    5.             url('pfad/zu/meine-schrift.ttf')  format('truetype');
    6. }
    7. html {
    8.     font-family: 'Meine Schrift', Verdana, Helvetica, Arial, sans-serif;
    9. }
    Innerhalb von font-face ließe sich auch noch font-weight und font-style definieren, liegt die Schriftart in den entsprechenden Varianten vor. Auch hier können Fallbacks genutzt werden, sowohl bei den Formaten als auch bei den Schriften für die definierten HTML Elemente.

    Hoffentlich konnte das etwas Klarheit schaffen, auch wenn ich im Grunde nur das bestätige, was Du bereits selber herausgefunden hast.
     
    Zuletzt bearbeitet: 08.02.2019
    #2      
    owieortho, pixelmaker und maerz1978 gefällt das.
  4. maginon

    maginon Noch nicht viel geschrieben Kreativ-Flatrate-User

    Dabei seit:
    20.01.2015
    Beiträge:
    45
    Geschlecht:
    weiblich
    Websichere Fonts versus Google-Web-Fonts
    WOW!
    DANKE!
    Das nenne ich mal eine umfassende, geduldige und weitführende Antwort! Keineswegs "kurz". (Die Intention war nur, niemandem die Zeit rauben zu wollen.)
    Du hast mir sehr geholfen und diese Zusammenhänge bringen echt Klarheit.

    Nun, mit den Google-Fonts ist das ja wegen der DSGVO so eine Sache. Da habe ich herausgefunden, dass, wenn die Schriften dann von Google bereitgestellt werden, der Zugriff auf die Seite und dadurch auch auf die Daten damit verbunden ist. D. h. doch, man könnte Probleme bekommen, wenn man z. B. einen Web-Shop hat oder auch schon ein einfaches Kontaktformular. Da wäre jetzt die Frage, ob durch die Einbindung der Fonts der Zugriff von Google automatisch verhindert werden kann?

    ... Und die Codes finde ich äußerst interessant. Danke auch dafür. Nur bin ich leider kein Webdesigner und meine erste dumme Frage wäre, wo, an welcher Stelle diese Codes im HTML überhaupt stehen müssen? Immer, bevor der Text beginnt? Und wo müssen die Schriften liegen, damit die Programmierung darauf zurückgreifen kann beim Export der Seite?
    Also sorry. Diese Fragen brauchst Du nicht unbedingt zu beantworten. Da ich wirklich nur ganz rudimentäres Anfängerwissen habe, sind Deine Erklärungen wahrscheinlich eh für die Katz. Und ich will Dich damit nicht kirre machen, dass Du noch ausrastest ;-)))). Das würde zu weit führen, da ich so gut wie nix darüber weiß. Obwohl ich es sehr interessant finde und mich noch weiter damit beschäftigen werde.

    Danke für Deine Antwort und viele Grüße!
    maginon
     
    #3      
  5. tynick

    tynick nicht mehr oft zu sehen

    471
    Dabei seit:
    29.07.2013
    Beiträge:
    1.599
    Geschlecht:
    männlich
    Software:
    Affinity Photo, HitFilm Pro, Luminar, Aurora HDR, Win 10
    Kameratyp:
    Nikon D5500
    Websichere Fonts versus Google-Web-Fonts
    Da kann ich leider nicht weiterhelfen; zu wenig Ahnung.
    Am einfachsten in einer externen CSS Datei, die dann im HTML oder PHP Dokument verlinkt wird.
    http://de.html.net/tutorials/css/lesson2.php
    https://www.mediaevent.de/css/css-einbinden.html
     
    #4      
  6. pixelmaker

    pixelmaker jeden Tag neu hier

    Dabei seit:
    20.03.2009
    Beiträge:
    1.050
    Geschlecht:
    männlich
    Ort:
    Callenberg, bei Hohenstein-Er
    Software:
    CC2018, C4D, Blender, diverse CAD, CamBam, mac OS X 10.11.6
    Kameratyp:
    DSLR Nikon
    Websichere Fonts versus Google-Web-Fonts
    Datenschutzbeauftragter Info sagt aus…
    Weil einfach immer noch niemand etwas genaues weiß und sich auch kein Politiker darum schert Klarheit zu schaffen. Die ohnehin überlasteten Gerichte machen das schon…

    Dabei geht es in dem Artikel um die Frage ob denn die Übermittlung der Besucher-IP aus "berechtigtem Interesse" (Art. 6 Abs. 1 lit. f) DSGVO) stattfinden darf.
    So lange es in Fachbeiträgen wie diesem keine Antwort gibt ist man auf wackeligem Fuß und muß selbst abwägen ob man Google Fonts in der Online-Version verwendet.
    Hier ist ein Beitrag der erklärt wie man Google Fonts lokal einbindet.
    Das ist relativ einfach und ich sehe die Aussagen von google in den Developer FAQ als Genehmigung zum Download und zur Installation auf dem lokalen Server, Punkt 1-3


    grüße
    ++ralfg
     
    #5      
    tynick gefällt das.
  7. maginon

    maginon Noch nicht viel geschrieben Kreativ-Flatrate-User

    Dabei seit:
    20.01.2015
    Beiträge:
    45
    Geschlecht:
    weiblich
    Websichere Fonts versus Google-Web-Fonts
    Vielen, vielen Dank an euch beide für diese umfassenden Aussagen! Das wird mein Wochenend-Programm, mir das alles zu Gemüte zu führen!
    Liebe Grüße!!
    maginon
     
    #6      
Seobility SEO Tool
x
×
×