Comunidad de diseño web y desarrollo en internet online

FONT FACE QUE NO FUNCIONA

Citar            
MensajeEscrito el 23 Mar 2012 05:02 pm
Buenas tardes, estoy tratando de implementar font face y he intentado de mil maneras y no funciona, si alguién me puede ayudar a saber que estoy haciendo mal le agradecería mucho, esta organizado así:

En mi hoja de estilos tengo:

Código :

@charset "utf-8";
/* CSS Document */

@font-face {
    font-family:"BebasNeueRegular";
    src: url("BebasNeue-webfont.eot");
    src: url("BebasNeue-webfont.eot?#iefix") format('embedded-opentype'),
        url("BebasNeue-webfont.woff") format('woff'),
         url("BebasNeue-webfont.ttf") format('truetype'),
         url("BebasNeue-webfont.svg#BebasNeueRegular") format('svg');

h3 {
   
   font-family: "BebasNeueRegular", Arial, Helvetica, sans-serif;
   }
}


En el html:

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tejada y Mutis - Inicio</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
       
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
   
   $(".accordion h3:first").addClass("active");
   $(".accordion div").hide();

   $(".accordion h3").click(function(){
      $(this).next("div").slideToggle("fast")
      .siblings("div:visible").slideUp("fast");
      $(this).toggleClass("active");
      $(this).siblings("h3").removeClass("active");
   });

});
</script>
</head>

<body>
<div id="cabezote"><!--abre cabezote-->
      <div class="navegacion"><img src="images/logo.png" width="300" height="57" alt="Logo" />
      <?php include("menu.php"); ?>
      </div>
</div><!--cierra cabezote-->

<div id="contenedor"><!--abre contenedor-->
  <div id="contenido"><!--abre contenido-->
    <div class="accordion"><!--abre acordeon-->
      <h3 class="crepes">contenido1</h3>
   <div>Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
   <h3 class="cms">contenido1</h3>
   <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
   <h3 class="clg">contenido3</h3>
   <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
   <h3 class="superficies">contenido4</h3>
   <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
   <h3>contenido5</h3>
   <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
</div><!--cierra acordeon-->
    
  </div><!--cierra contenido-->
</div><!--cierra contenedor-->

</body>
</html>

Lo que necesito es que los (h) adopten esta fuente

Las fuentes estan al mismo nivel de estos archivos sueltas

Muchas gracias.

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

chrome
Citar            
MensajeEscrito el 23 Mar 2012 05:24 pm
O has cometido un error de sintaxis sin querer, o estás confundido.

En CSS no se anidan declaraciones por lo que la declaración h3 no debe estar dentro de la declaración font-face:

Código HTML :

[css]
@font-face {
    font-family:"BebasNeueRegular";
    src: url("BebasNeue-webfont.eot");
    src: url("BebasNeue-webfont.eot?#iefix") format('embedded-opentype'),
        url("BebasNeue-webfont.woff") format('woff'),
         url("BebasNeue-webfont.ttf") format('truetype'),
         url("BebasNeue-webfont.svg#BebasNeueRegular") format('svg');

} /* finaliza font-face */
h3 {
   
   font-family: "BebasNeueRegular", Arial, Helvetica, sans-serif;
} /* finaliza H3 */
[/css]

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 23 Mar 2012 05:32 pm
Hola gracias por la respuesta, me quedo anidado fue acá, en el archivo estan separados como deben ir, pero no funciona.

[css]
@font-face {
font-family:"BebasNeueRegular";
src: url("BebasNeue-webfont.eot");
src: url("BebasNeue-webfont.eot?#iefix") format('embedded-opentype'),
url("BebasNeue-webfont.woff") format('woff'),
url("BebasNeue-webfont.ttf") format('truetype'),
url("BebasNeue-webfont.svg#BebasNeueRegular") format('svg');

} /* finaliza font-face */
h3 {

font-family: "BebasNeueRegular", Arial, Helvetica, sans-serif;
} /* finaliza H3 */
[/css]

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

chrome
Citar            
MensajeEscrito el 23 Mar 2012 06:04 pm
Controla que el navegador está encontrando el archivo en el lugar correcto.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 26 Mar 2012 01:16 pm
Todo estaba bien, lo que pasaba era que estaba publicando desde dreamweaver y desde allí no las mostraba no se por qué, pero al ejecutar el archivo html desde la carpeta todo funcionaba....

Por alejilla

Claber

120 de clabLevel



Genero:Femenino  

Colombia

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.