Come posso utilizzare il carattere Roboto di Google su un sito Web?

165

Voglio utilizzare il carattere Roboto di Google sul mio sito Web e sto seguendo questo tutorial:

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

Ho scaricato il file che ha una struttura di cartelle come questa:

inserisci qui la descrizione dell'immagine

Ora ho tre domande:

  1. Ho CSS nel mio media/css/main.cssURL. Quindi dove devo mettere quella cartella?
  2. Devo estrarre tutto eot, svg ecc da tutte le sottocartelle e metterle nella fontscartella?
  3. Devo creare il file css fonts.css e includerlo nel mio file modello di base?

L'esempio che usa questo

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

Come dovrebbe essere il mio url, se voglio avere la struttura dir come:

/media/fonts/roboto

html  css  fonts 
— user26
fonte

Risposte:

259

Non hai davvero bisogno di fare nulla di tutto ciò.

  • Vai alla pagina Font Web di Google
  • cerca Robotonella casella di ricerca in alto a destra
  • Seleziona le varianti del carattere che desideri utilizzare
  • fai clic su "Seleziona questo carattere" nella parte superiore e scegli i pesi e i set di caratteri di cui hai bisogno.

La pagina ti darà un <link>elemento da includere nelle tue pagine e un elenco di font-familyregole di esempio da usare nel tuo CSS.

L'uso dei caratteri di Google in questo modo garantisce la disponibilità e riduce la larghezza di banda sul proprio server.

— Sunil Garg
fonte
Grazie per quello, è stato perfetto. Sai quale impostazione utilizza Google per i loro caratteri playlist nel Google Play Store. voglio avere uno stile esattamente così. Inoltre non ho trovato il collegamento o lo snippet di codice nel collegamento. vedo i caratteri lì, ma nessun codice
— user26
3
Fantastico, forniscono anche un @import per MENO file! Tuttavia, test senza connessione a Internet O problemi di connessione a Google (ad es. Cina) = NO caratteri ... Ho anche notato che non c'è Roboto Black (Roboto Bk) font-family: in realtà usano solo 3 famiglie di caratteri (Roboto, Roboto Condensed e Roboto Slab) vengono realizzate tutte le altre varianti di Roboto font-stylee le font-weightmodifiche CSS. Quindi idealmente, dopo aver posizionato Google <link>controlla se i caratteri sono davvero lì. In caso contrario, utilizzare il proprio (tra l'altro il caricamento di tutti i file da una famiglia di caratteri normalmente non supera 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'>Questo carica tutti gli stili da una sola famiglia di caratteri: Roboto. Tuttavia, se hai bisogno di una famiglia di caratteri non presente in Google Fonts (come Roboto Black ) hai bisogno dei file nelle tue cartelle e copia il codice di esempio che ci hai mostrato nella tua domanda sul tuo main.css (come questo @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.o come ho suggerito in la mia risposta).
— Armfoot,
14
-1 per Using Google's fonts this way guaranties availability. Niente "garantisce la disponibilità", tanto meno i caratteri Google. Mi capita di essere una delle oltre miliardi di persone per le quali l'utilizzo della CDN di Google significa che tonnellate di siti Web non riescono a caricarsi correttamente, o per niente. Non sto dicendo a nessuno cosa fare, ma non credo che la CDN di Google sia una soluzione perfetta.
— Nateowami,
1
-1. Come accennato da @Nateowami, stai facendo affidamento sui server di Google (che potrebbero essere bloccati in alcuni paesi), è un male per la privacy e le prestazioni potrebbero effettivamente essere migliori se si ospitano i caratteri su una CDN. È più lavoro ma è il tuo lavoro, no?
— Robin Métral,
71

Esistono DUE approcci che è possibile adottare per utilizzare i caratteri Web con licenza sulle pagine:

  1. I servizi di hosting di font come Typekit, Fonts.com, Fontdeck, ecc., Forniscono ai progettisti un'interfaccia semplice per la gestione dei font acquistati e generano un collegamento a un file CSS o JavaScript dinamico che serve il font. Google fornisce anche questo servizio gratuitamente ( ecco un esempio per il carattere Roboto che hai richiesto). Typekit è l'unico servizio che fornisce suggerimenti sui caratteri aggiuntivi per garantire che i caratteri occupino gli stessi pixel nei browser.

Caricatori di font JS come quello utilizzato da Google e Typekit (ovvero caricatore WebFont) forniscono classi CSS e callback per aiutare a gestire il FOUT che può verificarsi o timeout di risposta durante il download del font.

    <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'approccio fai-da-te prevede l'ottenimento di un font concesso in licenza per l'uso sul web e (facoltativamente) l'utilizzo di uno strumento come il generatore (o alcuni software) di FontSquirrel per ottimizzare le dimensioni del file. Quindi, un'implementazione cross-browser della @font-faceproprietà CSS standard viene utilizzata per abilitare i caratteri.

Questo approccio può fornire migliori prestazioni di caricamento poiché si ha un controllo più granulare sui caratteri da includere e quindi sulla dimensione del file.

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

Per farla breve:

L'uso dei servizi di hosting dei font insieme alla dichiarazione @ font-face offre il miglior risultato in termini di prestazioni, compatibilità e disponibilità complessive.

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

AGGIORNARE

Roboto: il carattere della firma di Google ora è open source

Ora puoi generare manualmente i caratteri Roboto usando le istruzioni che puoi trovare qui .

— Ashesh Kumar Singh
fonte
17

Vecchio post, lo so.

Questo è anche possibile utilizzando 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;
}
— rocksteady
fonte
8
La tua soluzione è un anti-pattern prestazionale. L'uso di un tag di collegamento nel markup comporta un download più rapido del file CSS di Google rispetto a @import; il browser scopre semplicemente il riferimento di risorsa prima in generale e in particolare a causa del precaricatore (mentre analizza l'HTML vs. prima analizza l'HTML, quindi scopri il tuo file CSS, quindi scaricalo, quindi analizza e scopri @import, quindi scarica il foglio di stile importato).
— Radko Dinev,
3
Non necessariamente. Usando Webpack e plugin, tutto ciò sarà incorporato nella tua build di distribuzione.
— Spock,
6

Il si srcriferisce direttamente ai file dei caratteri, quindi se li posizioni tutti/media/fonts/roboto dovresti fare riferimento a loro nel tuo main.css in questo modo: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

La ..va su una cartella, il che significa che ti stai riferendo alla mediacartella se main.css è nella /media/csscartella.

Devi utilizzare ../fonts/roboto/tutti i riferimenti URL nel CSS (e assicurarti che i file si trovino in questa cartella e non in sottodirectory, come roboto_black_macroman).

Fondamentalmente (rispondendo alle tue domande):

Ho CSS nel mio URL media / css / main.css. Quindi dove devo mettere quella cartella

Puoi lasciarlo lì, ma assicurati di usare src: url('../fonts/roboto/

Devo estrarre tutto eot, svg ecc da tutte le sottocartelle e inserire la cartella dei caratteri

Se vuoi fare riferimento direttamente a quei file (senza inserire le sottodirectory nel tuo codice CSS), allora sì.

Devo creare il file css fonts.css e includerlo nel mio file modello di base

Non necessariamente, puoi semplicemente includere quel codice nel tuo main.css. Ma è una buona pratica separare i caratteri dal tuo CSS personalizzato.

Ecco un esempio di un file LESS / CSS di caratteri che uso:

@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 questo esempio sto solo usando il ttf) Poi uso @import "fonts";nel mio file main.less ( meno è un preprocessore CSS, rende le cose come queste un po 'più facili )

— Armfoot
fonte
2

Questo è quello che ho fatto per ottenere i file woff2 desiderati per la distribuzione statica senza dover utilizzare un CDN

Aggiungi TEMPORANEAMENTE il cdn per il CSS per caricare i caratteri roboto in index.html e caricare la pagina. dagli strumenti di sviluppo di google guarda le fonti ed espandi il nodo fonts.googleapis.com e visualizza il contenuto della famiglia css? Roboto: 300.400.500 e display = scambia file e copia il contenuto. Inserisci questo contenuto in un file CSS nella directory delle risorse.

Nel file css, rimuovi tutte le cose greche, criliche e vietnamite.

Guarda le righe in questo file CSS che sono simili a:

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

copia l'indirizzo del link e incollalo nel tuo browser, scaricherà il font. Inserisci questo carattere nella cartella delle risorse e rinominalo qui, così come nel file CSS. Fallo agli altri link, avevo 6 file woff2 unici.

Ho seguito gli stessi passaggi per le icone dei materiali.

Ora torna indietro e commenta la riga in cui chiami cdn e usa invece il nuovo file css che hai creato.

— Helzgate
fonte
1

Prova questo

<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>
— Sviluppatore principale
fonte
1

Usa / fonts / o / font / prima del nome del tipo di carattere nel tuo foglio di stile CSS. Devo affrontare questo errore, ma dopo che funziona bene.

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

Per il sito Web è possibile utilizzare il carattere 'Roboto' come di seguito:

Se hai creato un file CSS separato, metti sotto la riga nella parte superiore del file CSS come:

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

Oppure, se non desideri creare un file separato, aggiungi la riga sopra tra <style>...</style>:

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

poi:

html, body {
    font-family: 'Roboto', sans-serif;
}
— Signor nessuno
fonte
0

Hai letto il How_To_Use_Webfonts.html contenuto nel file zip?

Dopo averlo letto, sembra che ogni sottocartella di caratteri abbia un .css già creato che puoi usare includendo questo:

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

è facile

ogni cartella di quelli che hai scaricato ha un diverso tipo di carattere roboto, significa che sono caratteri diversi

esempio: "roboto_regular_macroman"

per usarne uno qualsiasi:

1- estrarre la cartella del carattere che si desidera utilizzare

2- caricalo vicino al file css

3- ora includilo nel file css

esempio per includere il carattere che ha chiamato "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;
}

guarda il percorso dei file, qui ho caricato la cartella chiamata "roboto_regular_macroman" nella stessa cartella in cui si trova il CSS

allora puoi semplicemente usare il carattere digitando font-family: 'Roboto';

— Omar Moustafa
fonte
0

In realtà è abbastanza semplice. Vai al carattere sul sito Web di Google e aggiungi il relativo link all'inizio di ogni pagina in cui desideri includere il carattere.

0

Trascorso un'ora, risolvendo i problemi di carattere.

Risposta correlata - Di seguito è per il React.jssito Web:

  1. Installa il modulo npm:

    npm install --save typeface-roboto-mono

  2. importare nel file .js che si desidera utilizzare
    uno dei seguenti :

    import "typeface-roboto-mono"; // se l'importazione è supportata
    require('typeface-roboto-mono') // se l'importazione non è supportata

  3. Per l'elemento puoi usare
    uno dei seguenti:

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

Spero che aiuti.

— Manohar Reddy Poreddy
fonte
0

Con css:

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

/* etc, etc. */

Con 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
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.