Come includere un font .ttf usando CSS?

120

Ho un problema con il mio codice. Perché voglio includere un carattere globale per la mia pagina e ho scaricato un file .ttf. E lo includo nel mio CSS principale ma il mio carattere non cambierà.

Ecco il mio semplice codice:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    font-family: oswald;
    vertical-align:baseline
}

Non so dove ho sbagliato. Puoi aiutarmi con questo? Grazie.

html css

— Jerielle
fonte

1

Puoi controllare la scheda Rete nella console del browser per assicurarti che il carattere sia caricato correttamente?

— rink.attendant.6

Get woff da qui

— Mr. Alien

1

Sei sicuro di aver digitato correttamente il nome del file del carattere? Non dovrebbe essere oswald.regular.ttf?

1

Sì, ho ricontrollato il nome del mio carattere

— Jerielle

5

@ Jerielle Quindi hai un font TTF con un'estensione di tff? Ne sei davvero sicuro?

174

Fornire solo file .ttf per webfont non sarà sufficiente per il supporto cross-browser. La migliore combinazione possibile al momento sta usando la combinazione come:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Questo codice presuppone che tu abbia i formati .eot, .woff, .ttf e svg per il tuo webfont. Per automatizzare tutto questo processo, puoi utilizzare: Transfonter.org .

Inoltre, i browser moderni si stanno spostando verso il carattere .woff, quindi probabilmente puoi farlo anche tu::

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

Maggiori informazioni qui: http://css-tricks.com/snippets/css/using-font-face/

Cerca il supporto del browser: Posso usare il fontface

— Abhinav Gauniyal
fonte

e se si sta utilizzando GFonts controllare stackoverflow.com/a/30585464/1727470

— Samy Bencherif

1

Per quelli come me che si confondono facilmente - i percorsi sono con barre in avantiurl('path/to/font.woff')

— wunth

Ho avuto un problema con i commenti nella regola del tipo di carattere. Spostare i commenti alla fine della regola ha risolto il problema.

— Eric D'Souza

Ho scoperto che il font per cui volevo generare un font web era nella lista nera di Font Squirrel. Tuttavia, transfonter.org ha funzionato per me.

— HotN

Ho anche avuto problemi con Font Squirrel. successo con font-converter.net

— Peter Hayman

23

Hai provato il formato?

@font-face {
  font-family: 'The name of the Font Family Here';
  src: URL('font.ttf') format('truetype');
}

Leggi questo articolo: http://css-tricks.com/snippets/css/using-font-face/

Inoltre, potrebbe dipendere anche dal browser.

— user3883419
fonte

14

Puoi usare il tipo di carattere in questo modo:

@font-face {
  font-family:"Name-Of-Font";
  src: url("yourfont.ttf") format("truetype");
}

— INTODAN
fonte

3

So che questo è un vecchio post ma questo ha risolto il mio problema.

@font-face{
  font-family: "Font Name";
  src: url("../fonts/font-name.ttf") format("truetype");
}

Espandi lo snippet

notare src:url("../fonts/font-name.ttf");che usiamo due punti per tornare alla directory principale e quindi nella cartella dei caratteri o ovunque si trovi il file.

spero che questo aiuti qualcuno su tutta la linea :) felice programmazione

— BlakeWebb
fonte