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

Question

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

Demandé el 12 de Août, 2013: Quand la question a-t-elle été
648231 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux 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 ceci :

enter image description here

Maintenant, j'ai trois questions :

J'ai du css dans mon media/css/main.css url. Où dois-je donc placer ce dossier ?
Dois-je extraire tous les eot, svg, etc. de tous les sous-dossiers et les placer dans le dossier de l'utilisateur ? fonts dossier ?
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 est le suivant

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

A quoi devrait ressembler mon url, si je veux avoir la structure dir comme :

/media/fonts/roboto

Demandé el 12 de Août, 2013 par user26

Answer 1

5 Réponses

Answer 2

339voto

Utilisateur non enregistré Points 0

Vous n'avez pas vraiment besoin de faire tout cela.

Allez sur le site de Google Page des polices Web
recherche de 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 <link> à inclure dans vos pages, et une liste d'exemples d'éléments font-family à utiliser dans votre CSS.

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

Répondu el 12 de Août, 2013 par Utilisateur non enregistré (0 Points )

Answer 3

91voto

Ashesh Kumar Singh Points 2949

Il existe DEUX approches que vous pouvez prendre pour utiliser des polices de caractères Web sous licence sur vos pages :

Les services d'hébergement de polices comme Typekit, Fonts.com, Fontdeck, etc., offrent aux concepteurs une interface facile 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 ( aquí est un exemple pour la police Roboto que vous avez demandée). Typekit est le seul service à fournir des indications supplémentaires sur les polices afin de 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 processus de chargement des polices. FOUT qui peuvent 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>

L'approche DIY consiste à obtenir une police sous licence pour une utilisation sur le Web et (éventuellement) à utiliser un outil comme le générateur de FontSquirrel (ou un autre logiciel) pour optimiser la taille du fichier. Ensuite, une implémentation multi-navigateur de la norme @font-face La propriété CSS est utilisée pour activer la ou les polices.

Cette approche permet d'obtenir de meilleures performances de chargement, car vous avez un contrôle plus précis 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;
    }

Pour faire court :

L'utilisation de services d'hébergement de polices avec la déclaration @font-face donne les meilleurs résultats en termes de performance globale, 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 caractères de Google est désormais en open source

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

Répondu el 18 de Juin, 2014 par Ashesh Kumar Singh (2949 Points )

Answer 4

28voto

rocksteady Points 1035

Vieux poste, je sais.

Cela est également possible en utilisant CSS @import url :

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

Répondu el 13 de Juin, 2016 par rocksteady (1035 Points )

Answer 5

8voto

Armfoot Points 101

Le site src se réfère directement aux fichiers de police, donc si vous les placez tous sur /media/fonts/roboto vous devez les référencer dans votre main.css comme ceci : src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

Le site .. va un dossier plus haut, ce qui signifie que vous vous référez à la media si le fichier main.css se trouve dans le dossier /media/css dossier.

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

En gros (pour répondre à vos questions) :

J'ai des css dans mon url media/css/main.css. Alors où dois-je placer 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 voulez faire référence à ces fichiers directement (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. Mais c'est une bonne pratique de séparer les polices de caractères 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, je n'utilise que le ttf) Puis j'utilise @import "fonts"; dans mon fichier main.less ( less est un préprocesseur CSS, qui facilite un peu les choses comme ceci )

Répondu el 12 de Août, 2013 par Armfoot (101 Points )

Answer 6

7voto

Bhavin Patel Points 73

Pour le site web, vous pouvez utiliser la police "Roboto" comme ci-dessous :

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

@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 les deux. <style>...</style> :

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

alors :

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

Répondu el 29 de Juin, 2018 par Bhavin Patel (73 Points )

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

Réponses

Pour faire court :

Roboto : La police de caractères de Google est désormais en open source

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Pour faire court :

Roboto : La police de caractères de Google est désormais en open source

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: