Problema con CSS y @font-face Problema con CSS y @font-face
Problema con CSS y @font-face
Mostrando resultados del 1 al 9 de 9
  1. #1
    Registro
    18-diciembre-2016
    Ubicación
    Argentina, Buenos Aires
    Mensajes
    589
    Problema con CSS y @font-face
    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:

    Código 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

    Código 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 cjefferson me ha dado la solución!

    Cita Iniciado por cjefferson Ver Mensaje
    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'),
    Última edición por csnotcs; 18-ago-2017 a las 22:09

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

    @font-face - CSS | MDN
    Citar Citar  

  3. #3
    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' ,
    Citar Citar  

  4. #4
    Registro
    18-diciembre-2016
    Ubicación
    Argentina, Buenos Aires
    Mensajes
    589
    Cita Iniciado por cjefferson Ver Mensaje
    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' ,
    Cita Iniciado por Daniel Muñoz Ver Mensaje
    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.
    Citar Citar  

  5. #5
    Registro
    30-marzo-2010
    Ubicación
    Peru
    Mensajes
    1.320
    verificaste que las rutas esten correctas, normalmente son problemas de rutas
    Citar Citar  

  6. #6
    Registro
    18-diciembre-2016
    Ubicación
    Argentina, Buenos Aires
    Mensajes
    589
    Cita Iniciado por cesardpaz Ver Mensaje
    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.
    Citar Citar  

  7. #7
    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'),
    Archivos Adjuntos Archivos Adjuntos
    Citar Citar  

  8. #8
    Registro
    18-diciembre-2016
    Ubicación
    Argentina, Buenos Aires
    Mensajes
    589
    Cita Iniciado por cjefferson Ver Mensaje
    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ó

    Bendiciones!
    Citar Citar  

  9. #9
    Cita Iniciado por mrpuppyisamerrypuppy Ver Mensaje
    WOW! No puedo creer que haya sido algo tan sencillo como eso jeje Muchas, Muchas, Muchas gracias! Me funcionó

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

Temas similares

  1. @font-face PROBLEMA en hoja de estilos externa
    Hola betas, Alguien sabe por qué motivo cuando agrego una fuente externa alojada en mi servidor local (por ejemplo,...
    Respuestas: 2
    Último mensaje: 11-abr-2017
  2. Inline google fonts con font-face no funciona, mejorando el pagespeed, ayuda!
    Hola amigos. Hay ocasiones en las que me obsesiono con las cosas, y una de esas es lograr 100/100 en pagespeed de Google. Estoy tratando de...
    Respuestas: 1
    Último mensaje: 18-feb-2016
  3. Ayuda con font-face
    Hola a todos, ¿alguien podría decirme como aplico una font de IcoMoon a blogger? Lo he intentado de varías formas, pero ninguna me ha funcionado...
    Respuestas: 6
    Último mensaje: 19-abr-2015
  4. Problema instalando una google font con un nombre de dos palabras
    Hola, Tengo problemas invocando una Google Font en mi site en wordpress. La fuente que quiero usar es Montserrat Alternates. La invoco en...
    Respuestas: 1
    Último mensaje: 24-sep-2013
  5. Ayuda no me funciona @font face en firefox
    Bueno lo que pasa es que me funciona bien el font face en google chrome, safari, opera menos en firefox y quisiera que alguien me pueda ayudar para...
    Respuestas: 4
    Último mensaje: 11-jun-2012

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •