Comment puis-je utiliser Google Roboto police sur un site web?

Je veux utiliser Google Roboto police 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 ceci:

Maintenant, j'ai trois questions:

J'ai css dans mon media/css/main.css url. Alors, où dois-je mettre ce dossier?
Dois-je extraire tous les eot,svg, etc de tous les sous dossier et mettre en fonts dossier?
Dois-je créer un fichier css pour les polices.la css et de l'inclure dans mon fichier du template 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;
}

Ce que mon url ressembler, si je veux avoir le dir structure comme:

/media/fonts/roboto

InformationsquelleAutor user26 | 2013-08-12

211

Vous n'avez pas vraiment besoin de faire tout cela.
- Aller à Google Polices Web page
- de recherche pour Roboto dans la boîte de recherche en haut à droite
- Sélectionner les variantes de la police que vous souhaitez utiliser
- cliquez sur "Sélectionnez la Police", en haut et choisissez le 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-family règles à utiliser dans votre CSS.

À l'aide de Google polices de cette façon, les garanties de disponibilité, et réduit la bande passante de votre propre serveur.
- Merci pour ça, c'était parfait. U ne sais qui de réglage de l'utilisation de google pour leur liste de lecture foonts dans le google play store. je veux avoir le style exactement comme ça. Aussi je n'ai pas trouver le lien ou l'extrait de code dans le lien. je vois les polices là, mais pas de code
- Ne peut pas aider sur le Google Play styles, j'en ai peur. Le <link> et 'font-family' éléments apparaissent au bas de la page avec la police-poids des pièces. Vous pourriez avoir besoin pour faire défiler pour voir.
- Cool, ils fournissent un @import pour les MOINS de fichiers trop! Cependant, le test w/o connexion internet OU Google problèmes de connexion (ex: la Chine) = PAS de Polices... j'ai aussi remarqué qu'il n'y a pas de Roboto Noir (Roboto Bk) font-family: ils ont fait seulement 3 familles de polices de caractères (Roboto, Roboto Condensed et Roboto Dalle) tous les autres Roboto variantes sont par le biais de font-style et font-weight CSS changements. Donc, idéalement, après le passage de la Google <link> vérifier si les polices sont vraiment là. Si non, utilisez votre propre (btw le chargement de tous les fichiers à partir d'une police de la famille n'a normalement pas dépasser 0,5 MO).
- comment puis-je télécharger toutes les polices de la famille
- href='http://fonts.googleapis.com/css?family=Roboto:400,100,100 italic,300,300 italic,400italic,500,500 italic,700,700 italic,900italic,900' rel='stylesheet' type='text/css" > Cette charge tous les styles de police-famille: Roboto. Toutefois, si vous avez besoin d'une police de la famille pas dans Google Fonts (Roboto Noir) vous avez besoin des fichiers sur vos dossiers, et de copier le code de l'exemple que vous nous avez montré dans votre question à votre main.css (comme cette @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).
- Pour info Roboto d'actualisation a été annoncé lors du Google I/O 2014 (googledevelopers.blogspot.com/2014/07/the-new-roboto.html), cependant, Google Polices est toujours au service de l'ancienne version du 16 Août 2014.
- suis-je le seul à voir le robot de la police sur un mac, c'est de manière différente, puis sur un pc?? PC est agréable et frais mais sur un MAC, c'est encombrant
- Google polices du site web (2016) fonts.google.com
- -1 pour Using Google's fonts this way guaranties availability. Rien de "garanties de disponibilité," beaucoup moins Google fonts. Il m'arrive d'être l'un des milliards de personnes pour qui l'utilisation de Google CDN signifie des tonnes de sites web ne se chargent pas correctement, ou à tous les. Je ne suis pas en parler à quiconque de quoi faire, mais ne pense pas que Google CDN est une solution parfaite.
- -1. Comme @Nateowami mentionné, vous êtes en s'appuyant sur les serveurs de Google (qui peut être bloqué dans certains pays), c'est mauvais pour la vie privée, et de la performance pourrait être mieux si vous hébergez vos polices sur un CA de vous-même. C'est plus de travail mais c'est votre travail, n'est-ce pas?
InformationsquelleAutor
52

Il y a DEUX approches que vous pouvez prendre pour utilisation sous licence de web-fonts sur vos pages:
1. De la police comme des Services d'Hébergement Typekit, Fonts.com, Fontdeck, etc., fournir une interface simple pour les concepteurs de gérer les polices achetées, et de générer un lien vers une dynamique de CSS ou de JavaScript fichier qui sert de la police. Google fournit ce service gratuitement (ici est un exemple pour la police Roboto que vous avez demandé). Typekit est le seul service pour fournir les autres font allusion à assurer les polices d'occuper le même pixels sur les navigateurs.
  
  JS police chargeurs comme celui utilisé par Google et Typekit (c'est à dire WebFont loader) fournir des classes CSS et des rappels pour vous aider à gérer le FOUT qui peuvent se produire, ou les délais de réponse lors du téléchargement de la police.
```
<head>
  
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>
```
2. Le BRICOLAGE approche implique l'obtention d'une police de caractères sous licence pour une utilisation web, et (éventuellement) à l'aide d'un outil comme FontSquirrel du générateur (ou un logiciel) afin d'optimiser la taille du fichier. Ensuite, une croix-navigateur de mise en œuvre de la norme @font-face propriété CSS est utilisé pour permettre à la police de caractère(s).
  
  Cette approche fournit de meilleures performances de chargement puisque vous avez un contrôle plus précis des caractères à inclure et donc la taille de 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'aide de la police des services d'hébergement avec @font-face déclaration donne la meilleure sortie à l'égard de la performance globale, la compatibilité et la disponibilité.

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

Mise à JOUR

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

Vous pouvez maintenant générer manuellement le Roboto polices à l'aide d'instructions qui peut être trouvé ici.

InformationsquelleAutor Ashesh Kumar Singh
14

Vieux post, je le sais.

Cela est également possible à l'aide de 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;
}
```
- Votre solution est une performance anti-modèle. À l'aide d'une balise de lien dans votre balisage des résultats au plus tôt le téléchargement de Google fichier CSS par rapport à @import; le navigateur découvre la ressource de référence plus tôt, en général, et en particulier en raison de la pré-chargeur (lors de l'analyse du HTML vs d'abord analyser le code HTML, puis découvrir votre fichier CSS, puis le télécharger, puis d'analyser et de découvrir les @import, puis de télécharger la feuille de style importée).
- Ok, je ne savais pas que. Merci pour tout ça!
- Pas nécessairement. À l'aide de Webpack et les plugins, tout cela va être intégré dans votre distribution de construire.
InformationsquelleAutor rocksteady
4

La src renvoie directement aux fichiers de police, donc si vous placez-les tous sur /media/fonts/roboto vous devez mentionner dans votre main.css comme ceci:
src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

La .. va un dossier vers le haut, ce qui signifie que vous faites allusion à la media dossier si le principal.css est dans le /media/css dossier.

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 pas dans des sous-répertoires, comme roboto_black_macroman).

Base (répondre à vos questions):

J'ai css dans mon media/css/main.css url. 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 dossier et le mettre dans le dossier fonts

Si vous souhaitez consulter ces fichiers directement (sans passer les sous-répertoires dans votre code CSS), alors oui.

Dois-je créer un fichier css pour les polices.la css et de l'inclure dans mon fichier du template de base

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

Voici un exemple de polices MOINS/fichier 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, je suis le seul à l'aide de la ttf)
Puis-je utiliser @import "fonts"; dans ma main.moins fichier (moins est un préprocesseur CSS, il fait ce genre de choses un peu plus facile)

InformationsquelleAutor Armfoot

Utilisation /fonts/ ou /police/ avant type de police nom dans votre feuille de style CSS. Je fais face à cette erreur, mais après que sa 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;

}

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

InformationsquelleAutor Mr. Nobody

0

Avez-vous lu l'How_To_Use_Webfonts.html c'est dans ce fichier zip?

Après lecture, il semble que chaque police sous-dossier a déjà créé .css là que vous pouvez utiliser en incluant cette:
```
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
```
InformationsquelleAutor Barry Colebank Jr
0

il est facile

tous les dossiers de ceux que vous avez téléchargé est un autre type de police roboto, signifie qu'ils sont différents des polices

exemple: "roboto_regular_macroman"

d'utiliser l'un d'eux:

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

2 - télécharger à proximité du fichier css

3 - maintenant l'inclure dans le fichier css

exemple pour y compris la police qui a appelé "la 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;
}
```
regarder pour le chemin d'accès des fichiers, ici j'ai téléchargé le dossier appelé "roboto_regular_macroman" dans le même dossier que le fichier css est

ensuite, vous pouvez simplement utiliser la police de caractères en tapant font-family: 'Roboto';

InformationsquelleAutor Omar Moustafa

Essayer cette

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

InformationsquelleAutor Lead Developer

Vous devez vous connecter pour publier un commentaire.

Longue histoire courte:

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