¿Cómo incluir una fuente .ttf usando CSS?

120

Tengo un problema con mi código. Porque quiero incluir una fuente global para mi página y descargué un archivo .ttf. Y lo incluyo en mi CSS principal, pero mi fuente no cambia.

Aquí está mi código simple:

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

No sé dónde me equivoqué. ¿Me puede ayudar con esto? Gracias.

html css Jerielle
fuente
1
¿Puede consultar la pestaña Red en la consola de su navegador para asegurarse de que la fuente esté cargada correctamente?
rink.attendant.6
Get woff from here
Mr. Alien
1
¿Está seguro de haber escrito correctamente el nombre del archivo de fuente? ¿No debería serlo oswald.regular.ttf?
1
Sí, verifiqué dos
veces
5
@Jerielle ¿Entonces tienes una fuente TTF con una extensión de tff? ¿Estás realmente seguro de eso?

Respuestas:

174

Solo proporcionar el archivo .ttf para la fuente web no será lo suficientemente bueno para la compatibilidad con varios navegadores. La mejor combinación posible en la actualidad es usar la combinación como:

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

Este código asume que tiene los formatos .eot, .woff, .ttf y svg para su fuente web. Para automatizar todo este proceso, puede utilizar: Transfonter.org .

Además, los navegadores modernos están cambiando hacia la fuente .woff, por lo que probablemente también puedas hacer esto:

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

Lea más aquí: http://css-tricks.com/snippets/css/using-font-face/

Busque compatibilidad con el navegador: ¿Puedo usar fontface

Abhinav Gauniyal
fuente
y si está utilizando GFonts, visite stackoverflow.com/a/30585464/1727470
Samy Bencherif
1
Para aquellos como yo que se confunden fácilmente, los caminos tienen barras inclinadas hacia adelanteurl('path/to/font.woff')
wunth
Tuve un problema con los comentarios en la regla del tipo de letra. Mover los comentarios al final de la regla solucionó el problema.
Eric D'Souza
Descubrí que la fuente para la que quería generar una fuente web estaba en la lista negra de Font Squirrel. Sin embargo, transfonter.org funcionó para mí.
HotN
También tuve problemas con Font Squirrel. éxito con font-converter.net
Peter Hayman
14

Puede usar una fuente como esta:

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

Sé que esta es una publicación antigua, pero esto resolvió mi problema.

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

observe src:url("../fonts/font-name.ttf");que usamos dos puntos para volver al directorio raíz y luego a la carpeta de fuentes o donde sea que se encuentre su archivo.

Espero que esto ayude a alguien en el futuro :) codificación feliz

BlakeWebb
fuente