Wie kann ich die Roboto-Schriftart von Google auf einer Website verwenden?

Lesezeit: 10 Minuten

Benutzer-Avatar
Benutzer26

Ich möchte die Roboto-Schriftart von Google auf meiner Website verwenden und folge diesem Tutorial:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

Ich habe die Datei heruntergeladen, die eine Ordnerstruktur wie folgt hat:

Geben Sie hier die Bildbeschreibung ein

Jetzt habe ich drei Fragen:

  1. Ich habe CSS in meinem media/css/main.css URL. Wo muss ich diesen Ordner ablegen?
  2. Muss ich alle EOT, SVG usw. aus allen Unterordnern extrahieren und einfügen fonts Mappe?
  3. Muss ich die CSS-Datei fonts.css erstellen und in meine Basisvorlagendatei aufnehmen?

Das Beispiel verwendet er dies

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Wie sollte meine URL aussehen, wenn ich die Verzeichnisstruktur wie folgt haben möchte:

/media/fonts/roboto

Sie müssen nichts davon wirklich tun.

  • Gehen Sie zu Google Seite Webfonts
  • suchen nach Roboto im Suchfeld oben rechts
  • Wählen Sie die Varianten der Schriftart aus, die Sie verwenden möchten
  • Klicken Sie oben auf „Diese Schriftart auswählen“ und wählen Sie die benötigten Schriftstärken und Zeichensätze aus.

Die Seite gibt Ihnen eine <link> Element, das Sie in Ihre Seiten einfügen möchten, und eine Liste mit Beispielen font-family Regeln zur Verwendung in Ihrem CSS.

Die Verwendung der Schriftarten von Google auf diese Weise garantiert die Verfügbarkeit und reduziert die Bandbreite zu Ihrem eigenen Server.

  • Danke dafür, das war perfekt. Wissen Sie, welche Einstellung Google für seine Playlist-Fonts im Google Play Store verwendet? genau so einen stil will ich haben. Außerdem habe ich den Link oder das Code-Snippet im Link nicht gefunden. Ich sehe die Schriftarten dort, aber keinen Code

    – Benutzer26

    12. August 2013 um 3:11 Uhr

  • Coole Sache, sie bieten auch einen @import für LESS-Dateien! Testen jedoch ohne Internetverbindung ODER Google-Verbindungsprobleme (z. B.: China) = KEINE Schriftarten … Mir ist auch aufgefallen, dass es kein Roboto Black (Roboto Bk) gibt. font-family: Sie verwenden eigentlich nur 3 Schriftfamilien (Roboto, Roboto Condensed und Roboto Slab), alle anderen Roboto-Varianten werden durchgearbeitet font-style und font-weight CSS-Änderungen. Also idealerweise nach dem Platzieren des Google <link> Überprüfen Sie, ob die Schriftarten wirklich vorhanden sind. Wenn nicht, verwenden Sie Ihre eigene (übrigens überschreitet das Laden aller Dateien einer Schriftfamilie normalerweise nicht 0,5 MB).

    – Armfuß

    12. August 2013 um 5:47 Uhr

  • @benutzer26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'> Dadurch werden alle Stile nur aus einer Schriftfamilie geladen: Roboto. Wenn Sie jedoch eine Schriftfamilie benötigen, die nicht in Google Fonts enthalten ist (z Roboter Schwarz) benötigen Sie die Dateien in Ihren Ordnern und kopieren Sie den Beispielcode, den Sie uns in Ihrer Frage gezeigt haben, in Ihre main.css (wie diese @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc. oder wie ich in meiner Antwort vorgeschlagen habe).

    – Armfuß

    14. August 2013 um 6:54 Uhr

  • -1 für Using Google's fonts this way guaranties availability. Nichts “garantiert Verfügbarkeit”, geschweige denn Google-Schriftarten. Ich bin zufällig einer von mehr als einer Milliarde Menschen, für die die Verwendung des CDN von Google bedeutet, dass Tonnen von Websites nicht richtig oder überhaupt nicht geladen werden. Ich sage niemandem, was zu tun ist, aber denke nicht, dass das CDN von Google eine perfekte Lösung ist.

    – Nateowami

    29. Dezember 2016 um 12:39 Uhr

  • -1. Wie @Nateowami erwähnt hat, verlassen Sie sich auf die Server von Google (die in bestimmten Ländern möglicherweise blockiert sind), dies ist schlecht für die Privatsphäre, und die Leistung könnte tatsächlich besser sein, wenn Sie Ihre Schriftarten selbst auf einem CDN hosten. Es ist mehr Arbeit, aber das ist Ihr Job, nicht wahr?

    – Robin Metral

    10. Mai 2019 um 7:16 Uhr

Benutzer-Avatar
Asche

Es gibt ZWEI Ansätze die Sie verwenden können, um lizenzierte Web-Fonts auf Ihren Seiten zu verwenden:

  1. Schriftarten-Hosting-Dienste wie Typekit, Fonts.com, Fontdeck usw. bieten Designern eine einfache Schnittstelle, um gekaufte Schriftarten zu verwalten und einen Link zu einer dynamischen CSS- oder JavaScript-Datei zu generieren, die die Schriftart bereitstellt. Google stellt diesen Service sogar kostenlos zur Verfügung (hier ist ein Beispiel für die von Ihnen angeforderte Roboto-Schrift). Typekit ist der einzige Dienst, der zusätzliche Hinweise auf Schriftarten bereitstellt, um sicherzustellen, dass Schriftarten in allen Browsern dieselben Pixel belegen.

JS-Font-Loader wie der von Google und Typekit (dh WebFont-Loader) bieten CSS-Klassen und Callbacks zur Verwaltung der FAUS die auftreten können, oder Antwortzeitüberschreitungen beim Herunterladen der Schriftart.

    <head>
      <!-- get the required files from 3rd party sources -->
      <link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">

      <!-- use the font -->
      <style>
        body {
          font-family: 'Roboto', sans-serif;
          font-size: 48px;
        }
      </style>
    </head>
  1. Der DIY-Ansatz besteht darin, eine Schriftart für die Verwendung im Internet zu lizenzieren und (optional) ein Tool wie den FontSquirrel-Generator (oder eine andere Software) zu verwenden, um die Dateigröße zu optimieren. Dann eine Cross-Browser-Implementierung des Standards @font-face Die CSS-Eigenschaft wird verwendet, um die Schriftart(en) zu aktivieren.

Dieser Ansatz kann eine bessere Ladeleistung bieten, da Sie eine genauere Kontrolle über die einzuschließenden Zeichen und damit die Dateigröße haben.

    /* get the required local files */
    @font-face {
      font-family: 'Roboto';
      src: url('roboto.eot'); /* IE9 Compat Modes */
      src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('roboto.woff') format('woff'), /* Modern Browsers */
      url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
    /* use the font */
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }

Um es kurz zu machen:

Die Verwendung von Font-Hosting-Diensten zusammen mit der @font-face-Deklaration ergibt die beste Ausgabe in Bezug auf Gesamtleistung, Kompatibilität und Verfügbarkeit.

Quelle: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

AKTUALISIEREN

Roboto: Die Signaturschrift von Google ist jetzt Open Source

Sie können die Roboto-Schriftarten jetzt manuell generieren, indem Sie Anweisungen verwenden, die gefunden werden können hier.

  • Können Sie bitte erklären, wie Sie eine bestimmte Schriftart aus der Roboto-Suite auswählen, falls Sie sich für mehrere entschieden haben?. Denn anscheinend gilt für alle dasselbe CSS-Attribut: font-family: ‘Roboto’, sans-serif;

    – Kosem

    25. Februar um 8:02 Uhr

Benutzer-Avatar
felsenfest

Alter Beitrag, ich weiß.

Dies ist auch mit möglich CSS @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}

  • Ihre Lösung ist ein Performance-Anti-Pattern. Die Verwendung eines Link-Tags in Ihrem Markup führt zu einem schnelleren Download der CSS-Datei von Google im Vergleich zu @import; Der Browser entdeckt die Ressourcenreferenz im Allgemeinen und insbesondere aufgrund des Preloaders nur früher (beim Parsen des HTML vs. zuerst den HTML-Code parsen, dann Ihre CSS-Datei entdecken, sie dann herunterladen, dann parsen und den @import entdecken Laden Sie das importierte Stylesheet herunter).

    – Radko Dinev

    10. November 2016 um 12:25 Uhr

  • Nicht unbedingt. Mit Webpack und Plugins wird dies alles in Ihren Distributions-Build eingebettet.

    – Spock

    18. August 2017 um 11:01 Uhr

  • Display=Swap hinzufügen

    – Barney Szabolcs

    3. Oktober 2020 um 8:07 Uhr

Benutzer-Avatar
Armfuß

Das src bezieht sich direkt auf die Font-Dateien, also wenn man sie alle anlegt /media/fonts/roboto Sie sollten in Ihrer main.css wie folgt darauf verweisen:
src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

Das .. geht einen Ordner nach oben, was bedeutet, dass Sie sich auf die beziehen media Ordner, wenn sich die main.css im Ordner befindet /media/css Mappe.

Sie müssen verwenden ../fonts/roboto/ in allen URL-Referenzen im CSS (und stellen Sie sicher, dass die Dateien in diesem Ordner liegen und nicht in Unterverzeichnissen wie z roboto_black_macroman).

Grundsätzlich (Beantwortung Ihrer Fragen):

Ich habe CSS in meiner media/css/main.css-URL. Also, wo muss ich diesen Ordner ablegen

Sie können es dort lassen, aber verwenden Sie es unbedingt src: url('../fonts/roboto/

Muss ich alle EOT, SVG usw. aus allen Unterordnern extrahieren und in den Schriftartenordner legen

Wenn Sie direkt auf diese Dateien verweisen möchten (ohne die Unterverzeichnisse in Ihrem CSS-Code zu platzieren), dann ja.

Muss ich die CSS-Datei fonts.css erstellen und in meine Basisvorlagendatei aufnehmen?

Nicht unbedingt, Sie können diesen Code einfach in Ihre main.css einfügen. Es empfiehlt sich jedoch, Schriftarten von Ihrem benutzerdefinierten CSS zu trennen.

Hier ist ein Beispiel für eine LESS/CSS-Datei mit Schriftarten, die ich verwende:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(In diesem Beispiel verwende ich nur das ttf) Dann benutze ich @import "fonts"; in meiner main.less-Datei (less ist ein CSS-Präprozessor, der solche Dinge ein wenig einfacher macht)

Benutzer-Avatar
Bhavin Patel

Für die Website können Sie die Schriftart „Roboto“ wie folgt verwenden:

Wenn Sie eine separate CSS-Datei erstellt haben, fügen Sie die folgende Zeile oben in der CSS-Datei ein:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Oder wenn Sie keine separate Datei erstellen möchten, fügen Sie die obige Zeile dazwischen ein <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

dann:

html, body {
    font-family: 'Roboto', sans-serif;
}

Mit CSS:

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */

Mit Sass:

  @font-face
    font-family: 'Roboto'
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
    font-weight: bold
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
    font-weight: normal
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
    font-weight: bold
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
    font-weight: 300
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
    font-weight: 300
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
    font-weight: 500
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
    font-weight: 500
    font-style: italic

/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */

/* https://fonts.google.com/specimen/Roboto#standard-styles */

Dies habe ich getan, um die woff2-Dateien zu erhalten, die ich für die statische Bereitstellung wollte, ohne ein CDN verwenden zu müssen

Fügen Sie VORÜBERGEHEND das cdn für das CSS hinzu, um die Roboto-Schriftarten in index.html zu laden, und lassen Sie die Seite laden. Sehen Sie sich in den Google-Entwicklungstools die Quellen an und erweitern Sie den Knoten fonts.googleapis.com. Zeigen Sie den Inhalt der css?family=Roboto:300,400,500&display=swap-Datei an und kopieren Sie den Inhalt. Legen Sie diesen Inhalt in einer CSS-Datei in Ihrem Assets-Verzeichnis ab.

Entfernen Sie in der CSS-Datei alle griechischen, krylischen und vietnamesischen Inhalte.

Schauen Sie sich die Zeilen in dieser CSS-Datei an, die ähnlich sind wie:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

Kopieren Sie die Link-Adresse und fügen Sie sie in Ihren Browser ein, um die Schriftart herunterzuladen. Legen Sie diese Schriftart in Ihren Assets-Ordner und benennen Sie sie hier sowie in der CSS-Datei um. Tun Sie dies mit den anderen Links, ich hatte 6 eindeutige woff2-Dateien.

Ich habe die gleichen Schritte für Materialsymbole befolgt.

Gehen Sie nun zurück und kommentieren Sie die Zeile, in der Sie das cdn aufrufen, und verwenden Sie stattdessen die neu erstellte CSS-Datei.

1335660cookie-checkWie kann ich die Roboto-Schriftart von Google auf einer Website verwenden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy