Rutarelativa

@font-face CSS3 en Google Chrome

(1)

25 / Enero / 2010

Desarrollo,Trucos,Web

@font-face no es una propiedad exactamente de CSS3, fue propuesta por CSS2 y se implementó en exploradores como Internet Explorer 5. @font-face, una propiedad para poder cargar tus propias fuentes de texto y que el usuario usara dicha fuente en lugar de la que tenga en su PC, no se terminó de implementar por motivos de seguridad y se quedó en el “olvido”, pero con el lanzamiento de HTML5 y CSS3 ya podremos utilizar esta maravillosa propiedad. Las nuevas versiones de exploradores como por ejemplo Firefox 3.6 ya pueden utilizarla, pero en exploradores como Google Chrome de momento por defecto viene desactivada por problemas de seguridad que todavía no han sido resueltos.

Como realizar @font-face en Google Chrome

Es tan sencillo como habilitar –enable-remote-fonts cuando ejecutamos Google Chrome. Nos dirigimos a las propiedades del acceso directo y añadimos al final en “destino” –enable-remote-fonts :

@font-face CSS3 en Google Chrome

Luego añadiremos a nuestro CSS la propiedad @font-face cargando así la fuente que necesitemos.

@font-face 
{
    font-family: nombre_fuente;
    src: url("nombre_fuente.otf");
}

body 
{
    font-family: nombre_fuente, sans-serif; 
}

Fuente: Pnamajck

Artículos relacionados

Cargar imágenes mediante CSS Publicado por KeLDroX el día 27/01/2010Guardado en CSS,Desarrollo
Mozilla Firefox no carga el CSS Publicado por sergiocius el día 14/03/2011Guardado en CSS,Desarrollo
La Fail Whale de Twitter completamente en CSS Publicado por sergiocius el día 28/07/2010Guardado en Anotaciones reducidas
Open Flash Chart: Librerías para gráficos en PHP Publicado por sergiocius el día 21/04/2010Guardado en Desarrollo,Tutoriales
Bloquear Pop-ups en Firefox Publicado por sergiocius el día 26/03/2010Guardado en Tutoriales

Sobre KeLDroX

297

Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.

Sigue a Ruta Relativa

Trackback en @font-face CSS3 en Google Chrome

Hasta el momento el artículo @font-face CSS3 en Google Chrome no tiene Trackbacks.

Comentarios en @font-face CSS3 en Google Chrome

Buenos días, estoy probando lo de @font-face, se ve la fuente en todos los navegadores menos en Chrome, está pero como invisible, no se que hago mál. Os envío el código css que pongo:

@font-face {
font-family:’FFFTusjBold’;
src: url(‘FFF_Tusj-webfont.eot’);
src: local(xx), url(‘FFF_Tusj-webfont.woff’) format(‘woff’), url(‘FFF_Tusj-webfont.ttf’) format(‘truetype’), url(‘FFF_Tusj-webfont.svg#webfontp2imLi8E’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h2 {
font-size: 170%;
font-weight: normal;
font-family: “FFF Tusj”, Arial, Helvetica, sans-serif;
}
os doy las gracias anticipadas

lista

22/11/2010 10:32:49

Escribir comentario en @font-face CSS3 en Google Chrome

¡Tu opinión nos interesa!. Escribe tu opinión lo más clara posible para que todos podamos entenderla, evita el spam, comentarios ofensivos, etc. ya que serán eliminados. Tu opinión sera moderada antes de ser publicada, por lo que su aparición en la web puede tardar unos minutos. Si deseáis ponerse en contacto para sugerencias o críticas podéis hacerlo desde el formulario de contacto.