Problemas con CSS3 @FONTFACE Hola a todos, pues el tema es que ya busque 1000 referencias de como usar @Fontface
y de niguna manera puedo hacer que este funcione (solo si uso google fonts).
Por favor pueden ayudarme, ya lo intente una y otra ves pero no puedo hacer que funcione.
Saludos!
Este es mi codigo CSS
/*FONTFACE*/
@font-face {
font-family: 'code_lightregular';
src: url('webfontkit/code_light-webfont.eot');
src: url('webfontkit/code_light-webfont.eot?#iefix') format('embedded-opentype'),
url('webfontkit/code_light-webfont.woff') format('woff'),
url('webfontkit/code_light-webfont.ttf') format('truetype'),
url('webfontkit/code_light-webfont.svg#code_lightregular') format('svg');
font-weight: normal;
font-style: normal;}
/*FONTFACE*/
h1 {
border-bottom:solid .03em #fff;
color:#fff;
float:right;
font-family:'code_lightregular';
font-weight: normal;
font-style: normal;
font-size:4em;
height:20%;
padding:1% 0 1% 0;
text-align:left;
width:100%;
}
Y este es mi código HTML.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Atelier Mummenthey</title>
<!-- MEDIA QUERIES STYLES-->
<!-- Phone -->
<link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:320px) and (max-width:480px)">
<!-- Tablet -->
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:481px) and (max-width:768px)">
<!-- Desktop -->
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1024px)">
<!-- MEDIA QUERIES STYLES-->
<link rel="stylesheet" href="webfontkit/stylesheet.css" type="text/css"/>
<script src="jquery/css3-mediaqueries.js"></script>
<link rel="stylesheet" href="css/desktop.css" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:200' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery/bg/jquery.anystretch.min.js"></script>
</head>
<body>
<header>
<div id="navcontainer" >
<div id="logo"><img src="images/logo.png" style="float:right"></div>
<nav>
<ul>
<li class="visited">Home</li>
<li><a href="#">Atelier</a></li>
<li><a href="#">Proyectos</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Avalúos</a></li>
<li><a href="#">Alliances</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<div id="main"class="div01">
<div id="wraper">
<h1>Präzision + <br> Color Mexicano</h1>
</div>
</div>
<script>
$('.div01').anystretch("images/bgs/01.jpg");
$('.div02').anystretch("images/bgs/01.jpg");
</script>
</body>
</html>
