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

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

23

¿Intentaste formatear?

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

Lea este artículo: http://css-tricks.com/snippets/css/using-font-face/

Además, también puede depender del navegador.

— user3883419
fuente

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