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

163

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 diese hat:

Geben Sie hier die Bildbeschreibung ein

Jetzt habe ich drei Fragen:

  1. Ich habe CSS in meiner media/css/main.cssURL. Wo muss ich diesen Ordner ablegen?
  2. Muss ich alle eot, svg usw. aus allen Unterordnern extrahieren und in den fontsOrdner legen ?
  3. Muss ich die CSS-Datei fonts.css erstellen und in meine Basisvorlagendatei aufnehmen?

Das Beispiel, das er verwendet

@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 dir-Struktur haben möchte:

/media/fonts/roboto

html css fonts user26
quelle

Antworten:

257

Sie müssen das nicht wirklich tun.

  • Wechseln Sie zur Seite " Web Fonts" von Google
  • Suchen Sie Robotoim Suchfeld oben rechts nach
  • 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 gewünschten Gewichte und Zeichensätze aus.

Auf der Seite finden Sie ein <link>Element, das Sie in Ihre Seiten aufnehmen können, sowie eine Liste mit Beispielregeln font-family, die Sie in Ihrem CSS verwenden können.

Die Verwendung der Google-Schriftarten auf diese Weise garantiert die Verfügbarkeit und reduziert die Bandbreite für Ihren eigenen Server.

Sunil Garg
quelle
Danke dafür, das war perfekt. Wissen Sie, welche Einstellung Google für die Wiedergabelisten-Foonts im Google Play Store verwendet? Ich möchte genau so einen Stil haben. Außerdem habe ich den Link oder das Code-Snippet nicht im Link gefunden. Ich sehe die Schriftarten dort, aber keinen Code
user26
3
Coole Sache, sie bieten auch einen @ Import für WENIGER Dateien! Testen ohne Internetverbindung ODER Probleme mit der Google-Verbindung (z. B. China) = KEINE Schriftarten ... Ich habe auch festgestellt, dass es kein Roboto Black (Roboto Bk) gibt font-family: Sie verwenden tatsächlich nur 3 Schriftfamilien (Roboto, Roboto Condensed und Roboto Slab) Alle anderen Roboto-Varianten werden durch font-styleund font-weightCSS-Änderungen vorgenommen. Im Idealfall <link>überprüfen Sie nach dem Platzieren von Google , ob die Schriftarten wirklich vorhanden sind. Wenn nicht, verwenden Sie Ihre eigene (übrigens: Das Laden aller Dateien aus einer Schriftfamilie überschreitet normalerweise nicht 0,5 MB).
Armfoot
7
@ user26 <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'>Hiermit werden alle Stile aus einer einzigen Schriftfamilie geladen : Roboto. Wenn Sie jedoch eine Schriftfamilie benötigen, die nicht in Google Fonts enthalten ist (z. B. Roboto Black ), benötigen Sie die Dateien in Ihren Ordnern und kopieren 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 in vorgeschlagen) meine Antwort).
Armfoot
14
-1 für Using Google's fonts this way guaranties availability. Nichts "garantiert die Verfügbarkeit", geschweige denn Google-Schriftarten. Ich bin einer von über einer Milliarde Menschen, für die die Verwendung von Googles CDN bedeutet, dass Tonnen von Websites nicht richtig oder überhaupt nicht geladen werden. Ich sage niemandem, was zu tun ist, denke aber nicht, dass Googles CDN eine perfekte Lösung ist.
Nateowami
1
-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 den Datenschutz 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 dein Job, nicht wahr?
Robin Métral
70

Es gibt ZWEI Ansätze , mit denen Sie lizenzierte Web-Schriftarten auf Ihren Seiten verwenden können:

  1. Font Hosting Services wie Typekit, Fonts.com, Fontdeck usw. bieten Designern eine einfache Schnittstelle zum Verwalten gekaufter Schriftarten und zum Generieren eines Links zu einer dynamischen CSS- oder JavaScript-Datei, die die Schriftart bereitstellt. Google stellt diesen Service sogar kostenlos zur Verfügung ( hier ein Beispiel für die von Ihnen angeforderte Roboto-Schriftart). Typekit ist der einzige Dienst, der zusätzliche Schrifthinweise bereitstellt, um sicherzustellen, dass Schriftarten in allen Browsern dieselben Pixel belegen.

    JS-Schriftlader wie der von Google und Typekit (z. B. WebFont Loader) bereitgestellte bieten CSS-Klassen und Rückrufe, um das möglicherweise auftretende FOUT oder Antwortzeitlimits beim Herunterladen der Schrift zu verwalten.

    <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>

  2. Der DIY-Ansatz besteht darin, eine Schriftart für die Webnutzung zu lizenzieren und (optional) ein Tool wie den Generator von FontSquirrel (oder eine Software) zu verwenden, um die Dateigröße zu optimieren. Anschließend wird eine browserübergreifende Implementierung der Standard- @font-faceCSS-Eigenschaft verwendet, um die Schriftart (en) zu aktivieren.

    Dieser Ansatz bietet eine bessere Ladeleistung, da Sie die einzuschließenden Zeichen und damit die Dateigröße genauer steuern können.

    /* 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 liefert 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: Googles Signaturschriftart ist jetzt Open Source

Sie können die Roboto-Schriftarten jetzt manuell mithilfe der Anweisungen generieren, die Sie hier finden .

Ashesh Kumar Singh
quelle
17

Alter Beitrag, ich weiß.

Dies ist auch mit CSS möglich @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;
}
rocksteady
quelle
8
Ihre Lösung ist ein Leistungs-Anti-Pattern. Die Verwendung eines Link-Tags in Ihrem Markup führt dazu, dass die CSS-Datei von Google im Vergleich zu @import früher heruntergeladen wird. Der Browser erkennt die Ressourcenreferenz nur früher im Allgemeinen und im Besonderen aufgrund des Preloaders (während er den HTML-Code analysiert und zuerst den HTML-Code analysiert, dann Ihre CSS-Datei erkennt, sie dann herunterlädt, dann analysiert und den @import erkennt Laden Sie das importierte Stylesheet herunter.
Radko Dinev
3
Nicht unbedingt. Mit Webpack und Plugins wird dies alles in Ihren Distributionsbuild eingebettet.
Spock
5

Das srcbezieht sich direkt auf die Schriftdateien. Wenn Sie also alle darauf platzieren /media/fonts/roboto, sollten Sie wie folgt auf sie in Ihrer main.css verweisen: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

Das ..geht einen Ordner nach oben, was bedeutet, dass Sie auf den mediaOrdner verweisen, wenn sich die Datei main.css im /media/cssOrdner befindet.

Sie müssen ../fonts/roboto/in allen URL-Verweisen im CSS verwenden (und sicherstellen, dass sich die Dateien in diesem Ordner und nicht in Unterverzeichnissen wie z. B. befinden roboto_black_macroman).

Grundsätzlich (Beantwortung Ihrer Fragen):

Ich habe CSS in meiner media / css / main.css URL. 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 Ihren CSS-Code aufzunehmen), 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 aufnehmen. Es empfiehlt sich jedoch, Schriftarten von Ihrem benutzerdefinierten CSS zu trennen.

Hier ist ein Beispiel für eine WENIGER / CSS-Datei, 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 verwende ich es @import "fonts";in meiner main.less-Datei ( weniger ist ein CSS-Präprozessor, es macht solche Dinge ein bisschen einfacher ).

Armfuß
quelle
2

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

Fügen Sie vorübergehend die CDN für die CSS hinzu, um die Roboto-Schriftarten in index.html zu laden, und lassen Sie die Seite laden. Suchen Sie in den Google Dev-Tools nach Quellen und erweitern Sie den Knoten fonts.googleapis.com. Zeigen Sie den Inhalt der CSS-Familie an. = Roboto: 300.400.500 & display = Swap-Datei und kopieren Sie den Inhalt. Fügen Sie diesen Inhalt in eine CSS-Datei in Ihrem Assets-Verzeichnis ein.

Entfernen Sie in der CSS-Datei alle griechischen, kryllischen 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 Linkadresse und fügen Sie sie in Ihren Browser ein. Die Schriftart wird heruntergeladen. Legen Sie diese Schriftart in Ihrem Assets-Ordner ab und benennen Sie sie hier sowie in der CSS-Datei um. Tun Sie dies zu den anderen Links, ich hatte 6 einzigartige woff2-Dateien.

Ich habe die gleichen Schritte für Materialsymbole ausgeführt.

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

Helzgate
quelle
1

Versuche dies

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
Leitender Entwickler
quelle
1

Verwenden Sie / fonts / oder / font / vor dem Namen des Schrifttyps in Ihrem CSS-Stylesheet. Ich stehe vor diesem Fehler, aber danach funktioniert es einwandfrei.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
Mohammed Javed
quelle
1

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

Wenn Sie eine separate CSS-Datei erstellt haben, setzen Sie die folgende Zeile oben in die CSS-Datei wie folgt:

@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 hinzu <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;
}
Herr Niemand
quelle
0

Haben Sie die Datei How_To_Use_Webfonts.html gelesen, die sich in dieser Zip-Datei befindet?

Nachdem Sie das gelesen haben, scheint es, dass jeder Schriftart-Unterordner eine bereits erstellte CSS-Datei enthält, die Sie verwenden können, indem Sie Folgendes einschließen:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Barry Colebank Jr.
quelle
0

es ist einfach

Jeder Ordner der von Ihnen heruntergeladenen hat eine andere Art von Roboto-Schriftart, dh es handelt sich um unterschiedliche Schriftarten

Beispiel: "roboto_regular_macroman"

um einen von ihnen zu benutzen:

1- Extrahieren Sie den Ordner der Schriftart, die Sie verwenden möchten

2- Laden Sie es in der Nähe der CSS-Datei hoch

3- Nehmen Sie es jetzt in die CSS-Datei auf

Beispiel für die Aufnahme der Schriftart "roboto_regular_macroman":

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Achten Sie auf den Pfad der Dateien. Hier habe ich den Ordner "roboto_regular_macroman" in denselben Ordner hochgeladen, in dem sich das CSS befindet

Dann können Sie die Schriftart einfach durch Eingabe verwenden font-family: 'Roboto';

Omar Moustafa
quelle
0

Es ist eigentlich ganz einfach. Gehen Sie zur Schriftart auf der Google-Website und fügen Sie den Link zum Kopf jeder Seite hinzu, auf der Sie die Schriftart einfügen möchten.


quelle
0

Verbrachte eine Stunde damit, die Schriftprobleme zu beheben.

Verwandte Antwort - Unten ist für die React.jsWebsite:

  1. Installieren Sie das npm-Modul:

    npm install --save typeface-roboto-mono

  2. Import in Js Datei , die Sie verwenden möchten ,
    eine der folgenden :

    import "typeface-roboto-mono"; // wenn der Import unterstützt wird
    require('typeface-roboto-mono') // wenn der Import nicht unterstützt wird

  3. Für das Element können Sie eines der folgenden Elemente verwenden
    :

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Hoffentlich hilft das.

Manohar Reddy Poreddy
quelle