web-dev-qa-db-fra.com

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

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 dossier comme celle-ci:

enter image description here

Maintenant, j'ai trois questions:

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

L'exemple qu'il utilise cette

@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 ma URL devrait-elle ressembler, si je souhaite avoir la structure dir comme:

/media/fonts/roboto

htmlcssfonts
127
user26

Vous n'avez pas vraiment besoin de faire ça.

  • Accéder à la page de polices Web de Google
  • rechercher Roboto dans 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 élément <link> à inclure dans vos pages et une liste d'exemples de règles font-family à utiliser dans votre code CSS.

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

216
user1864610

Il existe DEUX approches que vous pouvez utiliser 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 simple aux concepteurs pour la gestion des polices achetées et la création d'un lien vers un fichier CSS ou JavaScript dynamique qui sert de base de données. Google fournit même ce service gratuitement ( ici est un exemple pour la police Roboto que vous avez demandée). Typekit est le seul service à fournir des indications de polices supplémentaires pour garantir que les polices occupent les mêmes pixels sur 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 vous aider à gérer les événements FOUT , ou 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>

  2. L’approche DIY consiste à obtenir une police sous 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 du fichier. Ensuite, une implémentation inter-navigateur de la propriété standard @font-face CSS est utilisée pour activer la ou les polices.

    Cette approche peut offrir de meilleures performances de chargement car vous disposez d'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 permet d'obtenir les meilleurs résultats en termes de performances générales, de compatibilité et de disponibilité.

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

UPDATE

Roboto: la police de signature de Google est maintenant open source

Vous pouvez maintenant générer manuellement les polices Roboto en utilisant les instructions que vous pouvez trouver ici .

55
Ashesh Kumar Singh

Ancien post, 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;
}
14
rocksteady

La variable src fait directement référence aux fichiers de police. Par conséquent, si vous les placez tous sur /media/fonts/roboto, vous devez les consulter dans votre fichier principal.css comme suit: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

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

Vous devez utiliser ../fonts/roboto/ dans toutes les références d'URL du CSS (et assurez-vous que les fichiers se trouvent dans ce dossier et non dans des sous-répertoires, tels que roboto_black_macroman).

Fondamentalement (répondant à vos questions):

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

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

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

Si vous voulez 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 fichier main.css. Cependant, il est recommandé de séparer les polices de votre CSS personnalisé.

Voici un exemple de fichier de polices/CSS 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 format ttf) Ensuite, j'utilise @import "fonts"; dans mon fichier main.less ( less est un préprocesseur CSS, cela facilite un peu les choses de ce type )

4
Armfoot

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 ça 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;

}
1
Mohammed Javed
For Website you can use 'Roboto' font as below:

**If you have created separate css file then put below line at the top of css file as:**
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

**Or if you don't want to create separate file then add above line in between <style>...</style>:**
<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

**then:**
html, body {
    font-family: 'Roboto', sans-serif;
}
1
Mr. Nobody

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>
0
Lead Developer

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 police ait un fichier .css déjà créé que vous pouvez utiliser en incluant ceci:

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

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"

d'utiliser n'importe lequel d'entre eux:

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

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

3- maintenant l'inclure dans le fichier css

exemple pour inclure la police appelée "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';

0
Omar Moustafa