Problema con @font-face y CSS: La fuente no se muestra en el navegador

csnotcs · 2017-08-17T22:18:33-0500

Hola, tengo un problema con @font-face:

Resulta que quiero implementar @font-face. Ok. hasta ahí vamos bien. Procedo a descargar una fuente de texto, y para ahorrarme un poco de trabajo, uso el generador de font-face que tiene fontsquirrel (Create Your Own @font-face Kits » Font Squirrel).

Ahora, coloco el codigo en el mi .css el codigo que tengo es este:

HTML:

@font-face {
	font-family: 'Architext';
	src: url('hinted-Architext.eot');
	src: local('Architext Regular'), local('Architext'),
		url('directorio/hinted-Architext.eot?#iefix') format('embedded-opentype'),
		url('directorio/hinted-Architext.woff2') format('woff2'),
		url('directorio/hinted-Architext.woff') format('woff'),
		url('directorio/hinted-Architext.ttf') format('truetype'),
		url('directorio/hinted-Architext.svg#Architext') format('svg');
	font-weight: normal;
	font-style: normal;
}

Pero al abrir el .html en mi navegador, NO SE VE LA FUENTE 😕

Ya probé cambiar el archivo, usar solo .tff, verlo desde firefox y chrome, y nada, no se ve la fuente. Tambien probe liberar las fuentes en mi directorio raiz, pero no se ven tampoco.

¿Que podria pasar?

La forma en la que llamo a la fuente es mediante

HTML:

<font face="example">

Aunque tambien trate de especificar la fuente en el .css pero igual, no se ve la fuente.

ACTUALIZO:

Aca les dejo un documento de ejemplo, para que vean si estoy poniendo algo mal.

ACTUALIZO 2:

El usuario [MENTION=176602]cjefferson[/MENTION] me ha dado la solución!

cjefferson dijo:
Saludos mi pana , el problema de tu fuente es ruta de donde ubicar las fuentes.
Si tienes la fuente en una carpeta fuentes,
y el CSS en otra carpeta y el index.html en la raiz
Tienes que decirle al CSS que tiene que subir un nivel y entrar a una carpeta llamada fuentes, para subir de nivel es con dos puntos seguido de una barra ../

Ejemplo: url('../fuentes/hinted-Architext.woff2') format('woff2'),

Daniel Muñoz · 2017-08-17T23:34:01-0500

La fuente no se llama de esa manera, debes asignarla mediante CSS al elemento.

@font-face - CSS | MDN

cjefferson · 2017-08-18T00:06:08-0500

Ese código no es para el HTML, la fuente la tienes que agregar a una hoja de estilo CSS, y para hacer uso de ella es con font-family: 'Architext' ,

csnotcs · 2017-08-18T01:00:44-0500

cjefferson dijo:
Ese código no es para el HTML, la fuente la tienes que agregar a una hoja de estilo CSS, y para hacer uso de ella es con font-family: 'Architext' ,

Daniel Muñoz dijo:
La fuente no se llama de esa manera, debes asignarla mediante CSS al elemento.

@font-face - CSS | MDN

Pero si yo ese codigo lo colocaba en mi .css (la hoja de estilo) ademas que mediante <font face="example"> lo llamé siempre y siempre me funcionó, e igual intente llamarlo mediante el .css (font-family: 'Architext') e igualmente en este caso dejó de funcionar. En el HTML no ponia lo del .css, que igualmente si se puede llamar en el mismo html, pero bueno, yo siempre usé hojas de estilo por una cuestión de desempeño.

cesardpaz · 2017-08-18T01:18:16-0500

verificaste que las rutas esten correctas, normalmente son problemas de rutas

csnotcs · 2017-08-18T01:20:46-0500

cesardpaz dijo:
verificaste que las rutas esten correctas, normalmente son problemas de rutas

Sep, de hecho, intenté dejar todos los archivos en el directorio raiz, e igualmente no me funionó. Intente poner en la ruta .../carpeta/fuente (los tres puntos indicando root) e igual 😕

No se que pasó la verdad, porque antes funcionaba y lo unico que hice fue agregar tipos de tipografia, porque antes solo tenia ttf. E incluso cambie de fuente, porque tal vez y la fuente que usé, al tenerla en mi PC estaba corrupta, pero nada, nada de nada.

cjefferson · 2017-08-18T08:14:11-0500

Saludos mi pana , el problema de tu fuente es ruta de donde ubicar las fuentes.
Si tienes la fuente en una carpeta fuentes,
y el CSS en otra carpeta y el index.html en la raiz
Tienes que decirle al CSS que tiene que subir un nivel y entrar a una carpeta llamada fuentes, para subir de nivel es con dos puntos seguido de una barra ../

Ejemplo: url('../fuentes/hinted-Architext.woff2') format('woff2'),

csnotcs · 2017-08-18T23:08:24-0500

cjefferson dijo:
Saludos mi pana , el problema de tu fuente es ruta de donde ubicar las fuentes.
Si tienes la fuente en una carpeta fuentes,
y el CSS en otra carpeta y el index.html en la raiz
Tienes que decirle al CSS que tiene que subir un nivel y entrar a una carpeta llamada fuentes, para subir de nivel es con dos puntos seguido de una barra ../

Ejemplo: url('../fuentes/hinted-Architext.woff2') format('woff2'),

WOW! No puedo creer que haya sido algo tan sencillo como eso jeje Muchas, Muchas, Muchas gracias! Me funcionó 😀 😛7:

Bendiciones!

cjefferson · 2017-08-19T15:13:00-0500

mrpuppyisamerrypuppy dijo:
WOW! No puedo creer que haya sido algo tan sencillo como eso jeje Muchas, Muchas, Muchas gracias! Me funcionó 😀 😛7:

Bendiciones!

Que bueno hermano, esa es la idea ayudarnos entre todos, Saludos

Problema con @font-face y CSS: La fuente no se muestra en el navegador

csnotcs

Daniel Muñoz

cjefferson

csnotcs

cesardpaz

csnotcs

cjefferson

Adjuntos

csnotcs

cjefferson

Temas similares