Comment puis-je utiliser la police Roboto de Google sur un site Web?

165

Je souhaite utiliser la police Roboto de Google sur mon site Web et je suis ce tutoriel:

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

J'ai téléchargé le fichier qui a une structure de dossiers comme celle-ci:

entrez la description de l'image ici

Maintenant, j'ai trois questions:

  1. J'ai css dans mon media/css/main.css url. Alors, où dois-je mettre ce dossier?
  2. Dois-je extraire tous les eot, svg, etc. de tous les sous-dossiers et les mettre fonts dossier?
  3. Dois-je créer un fichier css fonts.css et l'inclure dans mon fichier de modèle de base?

L'exemple qu'il utilise

@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;
}

À quoi devrait ressembler mon URL, si je veux avoir la structure dir comme:

/media/fonts/roboto

html  css  fonts 
— utilisateur26
source

Réponses:

259

Vous n'avez pas vraiment besoin de faire cela.

  • Accédez à la page Web Fonts de Google
  • rechercher Robotodans le champ de recherche en haut à droite
  • Sélectionnez les variantes de la police que vous souhaitez utiliser
  • cliquez sur «Sélectionner cette police» en haut et choisissez les poids et les jeux de caractères dont vous avez besoin.

La page vous donnera un <link>élément à inclure dans vos pages et une liste d'exemples de font-familyrègles à utiliser dans votre CSS.

L'utilisation des polices Google de cette manière garantit la disponibilité et réduit la bande passante de votre propre serveur.

— Sunil Garg
source
Merci pour cela, c'était parfait. Savez-vous quel paramètre Google utilise pour ses listes de lecture dans Google Play Store. je veux avoir un style exactement comme ça. De plus, je n'ai pas trouvé le lien ou l'extrait de code dans le lien. Je vois les polices là-bas mais pas de code
— user26
3
Chose cool, ils fournissent également un @import pour les fichiers MOINS! Cependant, tester sans connexion Internet OU problèmes de connexion Google (par exemple: Chine) = PAS de polices ... J'ai également remarqué qu'il n'y a pas de Roboto Black (Roboto Bk) font-family: ils n'utilisent en fait que 3 familles de polices (Roboto, Roboto Condensed et Roboto Slab) tous les autres variantes de Roboto sont faites par le biais font-styleet les font-weightchangements CSS. Donc idéalement, après avoir placé le Google, <link>vérifiez si les polices sont vraiment là. Sinon, utilisez le vôtre (btw le chargement de tous les fichiers d'une famille de polices ne dépasse normalement pas 0,5 Mo).
— 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'>Ceci charge tous les styles d'une seule famille de polices: Roboto. Cependant, si vous avez besoin d'une famille de polices ne figurant pas dans Google Fonts (comme Roboto Black ), vous avez besoin des fichiers dans vos dossiers et copiez l'exemple de code que vous nous avez montré dans votre question dans votre main.css (comme ceci @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.ou comme je l'ai suggéré dans ma réponse).
— Armfoot
14
-1 pour Using Google's fonts this way guaranties availability. Rien ne "garantit la disponibilité", encore moins les polices Google. Il se trouve que je fais partie des milliards de personnes pour lesquelles l'utilisation du CDN de Google signifie que des tonnes de sites Web ne se chargent pas correctement, ou pas du tout. Je ne dis à personne quoi faire, mais je ne pense pas que le CDN de Google soit une solution parfaite.
— Nateowami
1
-1. Comme @Nateowami l'a mentionné, vous comptez sur les serveurs de Google (qui peuvent être bloqués dans certains pays), c'est mauvais pour la confidentialité , et les performances pourraient en fait être meilleures si vous hébergez vous-même vos polices sur un CDN. C'est plus de travail mais c'est votre travail, n'est-ce pas?
— Robin Métral
72

Vous pouvez utiliser DEUX approches pour utiliser des polices Web sous licence sur vos pages:

  1. Les services d'hébergement de polices tels que Typekit, Fonts.com, Fontdeck, etc., fournissent une interface facile aux concepteurs pour gérer les polices achetées et générer un lien vers un fichier CSS ou JavaScript dynamique qui sert la police. Google fournit même ce service gratuitement ( voici un exemple de la police Roboto que vous avez demandée). Typekit est le seul service à fournir des indications de police supplémentaires pour garantir que les polices occupent les mêmes pixels dans tous les navigateurs.

Les chargeurs de polices JS comme celui utilisé par Google et Typekit (c'est-à-dire le chargeur WebFont) fournissent des classes CSS et des rappels pour aider à gérer le FOUT qui peut se produire, ou les délais de réponse lors du téléchargement de la police.

    <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. L'approche DIY consiste à obtenir une licence pour une utilisation Web et (éventuellement) à utiliser un outil tel que le générateur de FontSquirrel (ou un logiciel) pour optimiser la taille de son fichier. Ensuite, une implémentation multi-navigateurs de la @font-facepropriété CSS standard est utilisée pour activer la ou les polices.

Cette approche peut fournir de meilleures performances de chargement car vous avez un contrôle plus granulaire sur les caractères à inclure et donc sur la taille du fichier.

    /* 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;
    }

Longue histoire courte:

L'utilisation des services d'hébergement de polices avec la déclaration @ font-face donne le meilleur résultat en termes de performances globales, de compatibilité et de disponibilité.

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

METTRE À JOUR

Roboto: la police de signature de Google est désormais open source

Vous pouvez maintenant générer manuellement les polices Roboto en utilisant les instructions qui peuvent être trouvées ici .

— Ashesh Kumar Singh
source
17

Ancien poste, je sais.

Ceci est également possible en utilisant 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;
}
— Solide comme un roc
source
8
Votre solution est un anti-modèle de performance. L'utilisation d'une balise de lien dans votre balisage entraîne un téléchargement plus rapide du fichier CSS de Google par rapport à @import; le navigateur découvre juste la référence de la ressource plus tôt en général et en particulier grâce au préchargeur (en analysant le HTML vs d'abord analyser le HTML, puis découvrez votre fichier CSS, puis téléchargez-le, puis analysez et découvrez le @import, puis télécharger la feuille de style importée).
— Radko Dinev
3
Pas nécessairement. En utilisant Webpack et des plugins, tout cela sera intégré dans votre version de distribution.
— Spock
6

Le srcfait directement référence aux fichiers de polices, donc si vous les placez tous sur/media/fonts/roboto vous devriez les consulter dans votre main.css comme ceci: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

Le ..dossier monte, ce qui signifie que vous faites référence au mediadossier si le main.css se trouve dans le /media/cssdossier.

Vous devez utiliser ../fonts/roboto/dans toutes les références d'url dans le CSS (et assurez-vous que les fichiers sont dans ce dossier et non dans des sous-répertoires, tels queroboto_black_macroman ).

En gros (en répondant à vos questions):

J'ai css dans mon url media / css / main.css. Alors, où dois-je mettre ce dossier

Vous pouvez le laisser là, mais assurez-vous d'utiliser src: url('../fonts/roboto/

Dois-je extraire tous les eot, svg, etc. de tous les sous-dossiers et les mettre dans le dossier des polices

Si vous souhaitez vous référer directement à ces fichiers (sans placer les sous-répertoires dans votre code CSS), alors oui.

Dois-je créer un fichier css fonts.css et l'inclure dans mon fichier de modèle de base

Pas nécessairement, vous pouvez simplement inclure ce code dans votre main.css. Mais c'est une bonne pratique de séparer les polices de votre CSS personnalisé.

Voici un exemple de fichier LESS / CSS de polices que j'utilise:

@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';}

(Dans cet exemple, j'utilise uniquement le ttf) Ensuite, j'utilise @import "fonts";dans mon fichier main.less ( less est un préprocesseur CSS, cela facilite un peu ce genre de choses )

— Armfoot
source
2

C'est ce que j'ai fait pour obtenir les fichiers woff2 que je voulais pour un déploiement statique sans avoir à utiliser un CDN

Ajoutez TEMPORAIREMENT le cdn pour que le css charge les polices roboto dans index.html et laissez la page se charger. à partir des outils de développement google, regardez les sources et développez le nœud fonts.googleapis.com et affichez le contenu du css? family = Roboto: 300,400,500 & display = swap file et copiez le contenu. Placez ce contenu dans un fichier css dans votre répertoire de ressources.

Dans le fichier css, supprimez tous les éléments grecs, crylliques et vietnamiens.

Regardez les lignes de ce fichier css qui sont similaires à:

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

copiez l'adresse du lien et collez-la dans votre navigateur, il téléchargera la police. Mettez cette police dans votre dossier de ressources et renommez-la ici, ainsi que dans le fichier css. Faites cela pour les autres liens, j'avais 6 fichiers woff2 uniques.

J'ai suivi les mêmes étapes pour les icônes matérielles.

Maintenant, revenez en arrière et commentez la ligne où vous appelez le cdn et utilisez à la place le nouveau fichier css que vous avez créé.

— Helzgate
source
1

Essaye ça

<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>
— Développeur principal
source
1

Utilisez / fonts / ou / font / avant le nom du type de police dans votre feuille de style CSS. Je fais face à cette erreur, mais après cela, cela fonctionne bien.

@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
source
1

Pour le site Web, vous pouvez utiliser la police 'Roboto' comme ci-dessous:

Si vous avez créé un fichier css séparé, placez la ligne ci-dessous en haut du fichier css comme suit:

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

Ou si vous ne voulez pas créer de fichier séparé, ajoutez la ligne ci-dessus entre <style>...</style>:

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

puis:

html, body {
    font-family: 'Roboto', sans-serif;
}
— Monsieur Personne
source
0

Avez-vous lu le How_To_Use_Webfonts.html qui se trouve dans ce fichier zip?

Après avoir lu cela, il semble que chaque sous-dossier de polices contient un .css déjà créé que vous pouvez utiliser en incluant ceci:

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

c'est facile

chaque dossier de ceux que vous avez téléchargés a un type différent de police roboto, ce qui signifie qu'il s'agit de polices différentes

exemple: "roboto_regular_macroman"

pour utiliser l'un d'entre eux:

1- extraire le dossier de la police que vous souhaitez utiliser

2- téléchargez-le près du fichier css

3- Maintenant, incluez-le dans le fichier css

exemple pour inclure la police qui a appelé "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;
}

surveillez le chemin des fichiers, ici j'ai téléchargé le dossier appelé "roboto_regular_macroman" dans le même dossier où se trouve le css

alors vous pouvez maintenant simplement utiliser la police en tapant font-family: 'Roboto';

— Omar Moustafa
source
0

C'est en fait assez simple. Accédez à la police sur le site Web de Google et ajoutez son lien en tête de chaque page sur laquelle vous souhaitez inclure la police.

0

J'ai passé une heure à résoudre les problèmes de police.

Réponse connexe - Ci-dessous, pour le React.jssite Web:

  1. Installez le module npm:

    npm install --save typeface-roboto-mono

  2. importer dans le fichier .js que vous souhaitez utiliser l'
    un des éléments ci-dessous :

    import "typeface-roboto-mono"; // si l'importation est prise en charge
    require('typeface-roboto-mono') // si l'importation n'est pas prise en charge

  3. Pour l'élément, vous pouvez utiliser l'
    un des éléments ci-dessous:

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

J'espère que cela pourra aider.

— Manohar Reddy Poreddy
source
0

Avec css:

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

/* etc, etc. */

Avec 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 */
— intika
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.