¿Cómo incrustar fonts en CSS?

Quiero utilizar algunas fonts y quiero que funcione sin tener esta fuente en la computadora cliente. He hecho esto pero no funciona:

@font-face { font-family: EntezareZohoor2; src: url(Entezar2.ttf) format("truetype"); } .EntezarFont{ font-family: EntezareZohoor2, B Nazanin, Tahoma !important; } 

Las siguientes líneas se utilizan para definir una fuente en css

 @font-face { font-family: 'EntezareZohoor2'; src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg'); font-weight: normal; font-style: normal; } 

Las siguientes líneas para definir / usar la fuente en css

 #newfont{ font-family:'EntezareZohoor2'; } 

Una de las mejores fonts de información sobre este tema es el artículo de syntax Bulletproof @ font-face de Paul Irish.

Léelo y terminarás con algo como:

 /* definition */ @font-face { font-family: EntezareZohoor2; src: url('fonts/EntezareZohoor2.eot'); src: url('fonts/EntezareZohoor2.eot?') format('☺'), url('fonts/EntezareZohoor2.woff') format('woff'), url('fonts/EntezareZohoor2.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* use */ body { font-family: EntezareZohoor2, Tahoma, serif; } 

Vaya a http://www.w3.org/TR/css3-fonts/

Prueba esto:

  @font-face { font-family: 'EntezareZohoor2'; src: url('EntezareZohoor2.eot'); src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg'); font-weight: normal; font-style: normal; } 

Pruebe este enlace1 , link2

 @font-face { font-family: 'RieslingRegular'; src: url('fonts/riesling.eot'); src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype'); } 

Utilicé la fuente de Ataturk así. No usé la versión “TTF”. Traducí la versión original de la fuente (versión “otf”) a la versión “eot” y “woof”. Luego funciona en local pero no funciona cuando cargué los archivos al servidor. Así que agregué la versión “TTF” también como esta. Ahora, está trabajando en Chrome y Firefox, pero Internet Explorer sigue siendo una defensa. Cuando instaló en su computadora la fuente “Ataturk”, entonces también trabajó IE. Pero quería usar esta fuente sin instalar.

 @font-face { font-family: 'Ataturk'; font-style: normal; font-weight: normal; src: url('font/ataturk.eot'); src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'), url('font/ataturk.woff') format('woff'); } 

Puedes verlo en mi sitio web aquí: http://www.canotur.com

Cuando fui a las fonts de Google, todo lo que me dieron fueron archivos de fonts de tipo verdadero .ttf y no explicaron en absoluto cómo usar @ font-face para incluirlos en mi documento. Probé también el generador de fonts web de la ardilla de fonts, que simplemente seguía ejecutando el GIF de carga y no funcionaba … Encontré este sitio –

https://transfonter.org/

Tuve un gran éxito usando el siguiente método:

Seleccioné el botón Agregar fonts , dejando las opciones predeterminadas, agregué todos mis .ttf que Google me dio para Open Sans (que era como 10, elegí muchas opciones …).

Luego seleccioné el botón Convertir .

¡Aquí está la mejor parte!

Me dieron un archivo zip con todos los archivos de formato de fuente que seleccioné, .ttf , .woff y .eot . Dentro de ese archivo zip tenían un archivo demo.html el que hice doble clic y se abrió una página web en mi navegador que me mostraba ejemplos de usos de todas las diferentes opciones de fuente css, cómo implementarlas, y qué aspecto tenían, etc. .

@font-face

Todavía no sabía en este momento cómo incluir correctamente las fonts en mi hoja de estilo usando @font-face pero luego noté que este demo.html su propia hoja de estilo en el zip. Abrí la hoja de estilo y mostró cómo incorporar todas las fonts usando @font-face para poder copiar y pegar esto fácil y rápidamente en mi proyecto.

 @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-LightItalic.eot'); src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-SemiBold.eot'); src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Regular.eot'); src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Light.eot'); src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Italic.eot'); src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot'); src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Bold.eot'); src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } 

El demo.html también tenía su propia hoja de estilo en línea que era interesante echar un vistazo, aunque estoy familiarizado con el trabajo con pesos y estilos de fuente una vez que están incluidos, así que no lo necesitaba demasiado. Para un ejemplo de cómo implementar un estilo de fuente en un elemento html con fines de referencia, podría usar el siguiente método en un caso similar al mío después de que @font-face se haya utilizado correctamente:

 html, body{ margin: 0; font-family: 'Open Sans'; } .banner h1{ font-size: 43px; font-weight: 700; } .banner p{ font-size: 24px; font-weight: 300; font-style: italic; }