[SOLUCIONADO] fonface, solo funciona en el html

dw14 · #1 (**permalink**) 30/05/2013, 01:56

Hola,

Estoy teniendo problemas para que el navegador utilice una fuente que declaro en el css mediante @fontface.
La fuente me la descargué de fontsquirrel y no funciona en ningún navegador.

La sintaxis del css es la siguiente

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('type/ColabThi-webfont.eot');
    src: url('type/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/ColabThi-webfont.woff') format('woff'),
         url('type/ColabThi-webfont.ttf') format('truetype'),
         url('type/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'ColaborateLightRegular';
    src: url('ColabLig-webfont.eot');
    src: url('ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabLig-webfont.woff') format('woff'),
         url('ColabLig-webfont.ttf') format('truetype'),
         url('ColabLig-webfont.svg#ColaborateLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;}
body {font-family: 'ColaborateThinRegular'; background-color: #014171; margin: 0; padding: 0}

Para que funcione tengo que poner @fontface en el html, de esta manera

Código HTML:

<!doctype html>
<html lang="gl">
<head>
	<meta charset="UTF-8">
	<title>Documento</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">	
	<style>@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('type/ColabThi-webfont.eot');
    src: url('type/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/ColabThi-webfont.woff') format('woff'),
         url('type/ColabThi-webfont.ttf') format('truetype'),
         url('type/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;}</style>
</head>

Si lo pongo solamente en el css no consigo que se muestre en el navegador

Triby · #2 (**permalink**) 30/05/2013, 03:41

Seguramente es por las rutas, supongo que si la carpeta "type" estuviera dentro de "css" funcionaría correctamente.

Adivinando, creo que tienes algo como:

/ <- Directorio raíz
/type/ <- Aquí las fuentes
/css/ <- Aquí tus estilos
/css/type/ <- Aquí deberían estar las fuentes para que funcione desde el CSS

dw14 · #3 (**permalink**) 30/05/2013, 04:32

Hola triby, gracias por la respuesta.

No me ha funcionado. Lo tenía como dices tú, la carpeta type fuera de css. He metido type dentro de css y nada. También he probado a meter los archivos de las fuentes en la carpeta directamente, sin carpeta type, y tampoco me ha funcionado.

dw14 · #4 (**permalink**) 31/05/2013, 00:08

NO se qué pasaba. Cuando hice los cambios que me dijo triby le di a refrescar la página en el navegador y no funcionó. Se me ocurrió cerrarlo y volver a abrirlo y todo estaba bien.