utilizar api google fonts

[guardarmicorreo]

Hola, tengo el siguiente código para utilizar la API Google Fonts en mi página web.
El problema es que no funciona mi código. La letra no adquiere la fuente que he establecido en style.css

style.css

Código CSS:

@import url (http://fonts.googleapis.com/css?family=Caesar+Dressing);
#caja {margin:0; padding:0; max-width:1280px; min-width:900px; max-height:1024px; min-height:600px; font-family: 'Caesar Dressing', cursive;  font-size: 100px;}
 

index.php

Código PHP:

<div id="caja">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada euismod urna, eu semper mauris commodo eget. Vestibulum mauris tellus, sodales sit amet sollicitudin ac, luctus eget felis. Etiam non urna id nisl malesuada suscipit. In hac habitasse platea dictumst. Morbi pulvinar volutpat purus, vel suscipit arcu dictum in. Vestibulum felis tortor, suscipit pellentesque suscipit vitae, commodo at sem. Aliquam enim nisl, vulputate eu venenatis eget, pretium ut lectus.
        
        Phasellus imperdiet ipsum a elit semper ac congue arcu cursus. Praesent risus ante, fringilla a luctus a, feugiat non velit. Donec augue sapien, eleifend id vehicula vitae, interdum quis leo. Quisque facilisis, augue sit amet sollicitudin consectetur, arcu lacus faucibus odio, convallis mattis purus metus vitae magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vehicula quam vel purus consectetur vel varius libero dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        
        Mauris erat augue, pretium in fermentum id, venenatis at quam. Donec ornare, massa fermentum ultrices dignissim, lacus nisi commodo augue, ut pellentesque ipsum nibh vel orci. Praesent ut tellus et enim pulvinar congue. Cras sit amet lacus mi, vulputate tempus massa. Pellentesque et feugiat lectus. Aenean ullamcorper pellentesque sagittis. Aliquam vulputate venenatis libero, quis adipiscing tellus blandit vel. Ut ante augue, sodales vel gravida sed, egestas sit amet arcu. Curabitur venenatis libero in dolor dignissim rutrum. Vivamus laoreet dui eu orci pellentesque eget condimentum tellus elementum. Donec ac tincidunt ipsum. Maecenas facilisis consectetur mi, quis luctus magna vulputate egestas. Nunc cursus sodales arcu id cursus.
        
        Etiam gravida ante non est ullamcorper ullamcorper. Vivamus sit amet purus eros, sed laoreet turpis. Morbi faucibus velit sed nibh dapibus vel tincidunt risus pretium. Proin dignissim luctus scelerisque. Curabitur imperdiet felis eu mi porttitor porttitor. Donec commodo ligula vitae tellus consectetur consectetur. Duis ac dignissim nulla. Etiam quis leo massa. Donec commodo sagittis sapien eget accumsan. Phasellus et facilisis nulla. Cras quis orci non tellus tristique volutpat nec sit amet felis.
        
        Ut sagittis luctus justo, quis cursus nisl fringilla feugiat. Nullam auctor mauris eu dui rutrum et tincidunt elit vestibulum. Duis rhoncus sapien nec sem blandit porttitor. Pellentesque ac dapibus dui. Mauris in metus eget massa eleifend porta. Nullam ut purus a turpis tincidunt vestibulum ut sed augue. Donec suscipit viverra dictum. Curabitur elit urna, consectetur vel commodo non, auctor molestie nulla. Nulla ut iaculis orci. Quisque dignissim viverra porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut pellentesque vestibulum tortor, nec gravida leo sollicitudin vel.
        </div>
 

¿Alguien me puede decir por qué?

Gracias

[pzin]

No veo ningún error ahí, está todo bien. ¿Lo tienes online para ver qué puede ser?

[guardarmicorreo]

Iniciado por pzin

No veo ningún error ahí, está todo bien. ¿Lo tienes online para ver qué puede ser?

gracias! no lo tengo online, lo tengo en local, utilizo xampp server.

no entiendo qué me está fallando para que no funcione correctamente :S

[pzin]

Ahm. Hay un espacio ahí entre url y ( que sobra.

[guardarmicorreo]

Iniciado por pzin

Ahm. Hay un espacio ahí entre url y ( que sobra.

gracias, he probado lo que me dices y sigue sin funcionar

[pzin]

Pues entonces supongo que tiene que haber más código que no muestras.

¿Te carga el archivo de la fuente de GWF correctamente? ¿No da ningún error?

[guardarmicorreo]

Iniciado por pzin

Pues entonces supongo que tiene que haber más código que no muestras.

¿Te carga el archivo de la fuente de GWF correctamente? ¿No da ningún error?

¿archivo de la fuente de GWF? no sé qué es eso :S

el código que ves es el que hay, aparte de un reseteo del css por defecto de los navegadores en mi hoja css y el esqueleto principal de una web (etiquetas html, head body, metas y link de la hoja de css), no hay más, la fuente del texto es lo primero que estoy abarcando en el diseño de mi página web :)

[pzin]

Iniciado por guardarmicorreo

¿archivo de la fuente de GWF? no sé qué es eso :S

Archivo de la fuente de Google Web Fonts. El archivo .css vaya, que si carga bien o no da algún error en la carga. Con firebug o con las herramientas de desarrollo lo puedes ver.

El código que pones, funciona bien: http://jsbin.com/olodes/1/edit

Así que debe de ser alguna otra cosa, no relativa al código, al menos no relativo al código que sabemos que usas, porque el resto "que no hay aparte de X, X, X, X, X y X" no lo vemos.

[Gothgauss]

Nunca había oído hablar de ese api. ¿en que consiste?

[guardarmicorreo]

Iniciado por pzin

Archivo de la fuente de Google Web Fonts. El archivo .css vaya, que si carga bien o no da algún error en la carga. Con firebug o con las herramientas de desarrollo lo puedes ver.

El código que pones, funciona bien: http://jsbin.com/olodes/1/edit

Así que debe de ser alguna otra cosa, no relativa al código, al menos no relativo al código que sabemos que usas, porque el resto "que no hay aparte de X, X, X, X, X y X" no lo vemos.

este es todo mi código

blog_index.php

Código PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<HTML>
    <HEAD>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <meta http-equiv="Content-Language" content="es"/>
        <link href="style.css" type="text/css" rel="stylesheet"/>
        <title></title>
    </HEAD>
    <BODY>
        <div id="caja">
        <i>holaaa
        dfkgcjmdsñglhdsfghdsfbghdsfkjgbdfshgkjdf
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada euismod urna, eu semper mauris commodo eget. </i> <br>Vestibulum mauris tellus, sodales sit amet sollicitudin ac, luctus eget felis. Etiam non urna id nisl malesuada suscipit. In hac habitasse platea dictumst. Morbi pulvinar volutpat purus, vel suscipit arcu dictum in. Vestibulum felis tortor, suscipit pellentesque suscipit vitae, commodo at sem. Aliquam enim nisl, vulputate eu venenatis eget, pretium ut lectus.
        
        Phasellus imperdiet ipsum a elit semper ac congue arcu cursus. Praesent risus ante, fringilla a luctus a, feugiat non velit. Donec augue sapien, eleifend id vehicula vitae, interdum quis leo. Quisque facilisis, augue sit amet sollicitudin consectetur, arcu lacus faucibus odio, convallis mattis purus metus vitae magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vehicula quam vel purus consectetur vel varius libero dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        
        Mauris erat augue, pretium in fermentum id, venenatis at quam. Donec ornare, massa fermentum ultrices dignissim, lacus nisi commodo augue, ut pellentesque ipsum nibh vel orci. Praesent ut tellus et enim pulvinar congue. Cras sit amet lacus mi, vulputate tempus massa. Pellentesque et feugiat lectus. Aenean ullamcorper pellentesque sagittis. Aliquam vulputate venenatis libero, quis adipiscing tellus blandit vel. Ut ante augue, sodales vel gravida sed, egestas sit amet arcu. Curabitur venenatis libero in dolor dignissim rutrum. Vivamus laoreet dui eu orci pellentesque eget condimentum tellus elementum. Donec ac tincidunt ipsum. Maecenas facilisis consectetur mi, quis luctus magna vulputate egestas. Nunc cursus sodales arcu id cursus.
        
        Etiam gravida ante non est ullamcorper ullamcorper. Vivamus sit amet purus eros, sed laoreet turpis. Morbi faucibus velit sed nibh dapibus vel tincidunt risus pretium. Proin dignissim luctus scelerisque. Curabitur imperdiet felis eu mi porttitor porttitor. Donec commodo ligula vitae tellus consectetur consectetur. Duis ac dignissim nulla. Etiam quis leo massa. Donec commodo sagittis sapien eget accumsan. Phasellus et facilisis nulla. Cras quis orci non tellus tristique volutpat nec sit amet felis.
        
        Ut sagittis luctus justo, quis cursus nisl fringilla feugiat. Nullam auctor mauris eu dui rutrum et tincidunt elit vestibulum. Duis rhoncus sapien nec sem blandit porttitor. Pellentesque ac dapibus dui. Mauris in metus eget massa eleifend porta. Nullam ut purus a turpis tincidunt vestibulum ut sed augue. Donec suscipit viverra dictum. Curabitur elit urna, consectetur vel commodo non, auctor molestie nulla. Nulla ut iaculis orci. Quisque dignissim viverra porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut pellentesque vestibulum tortor, nec gravida leo sollicitudin vel.
        </div>
    
    </BODY>
</HTML>
 

style.css

Código CSS:

/*//////////////////////////////////////////////////*/
/*CÓDIGO PARA RESETEAR HOJA DE ESTILOS DEL NAVEGADOR*/
/*//////////////////////////////////////////////////*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
<em>/* No olvides definir estilos para focus */</em>
:focus {
    outline: 0;
}
<em>/* No olvides resaltar de alguna manera el texto insertado/borrado */</em>
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
<em>/* En el código HTML es necesario añadir cellspacing="0" */</em>
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/*//////////////////////////////////////////////////*/
/*ESTE ES EL CSS3 DE LA WEB
sobre resolución 1920-W x 1080-H*/
/*//////////////////////////////////////////////////*/
 
@import url(http://fonts.googleapis.com/css?family=Caesar+Dressing);
#caja {margin:0; padding:0; max-width:1280px; min-width:900px; max-height:1024px; min-height:600px; font-family: 'Caesar Dressing', normal;}
 

he probado a quitar el reseteo del css3 del navegador, pero el problema persiste. alguien me puede ayudar? gracias :D

Gothgauss, esta api sirve para dar fuentes al texto de la web.

[pzin]

Si pones tu @import al principio del CSS tendría que funcionar bien.

[guardarmicorreo]

Iniciado por pzin

Si pones tu @import al principio del CSS tendría que funcionar bien.

ahora sí me funciona siguiendo tu indicación.

¿cómo encontraste el error? ¿cual es la lógica?

gracias!

[pzin]

La lógica se llama especificación de la W3C. http://www.w3.org/TR/CSS2/cascade.html#at-import

La regla @import tiene que preceder cualquier otra regla, menos @charset en caso de usarla.

[guardarmicorreo]

Iniciado por pzin

La lógica se llama especificación de la W3C. http://www.w3.org/TR/CSS2/cascade.html#at-import

La regla @import tiene que preceder cualquier otra regla, menos @charset en caso de usarla.

muchísimas gracias, te lo agradezco mucho.

[al_limon]

Iniciado por Gothgauss

Nunca había oído hablar de ese api. ¿en que consiste?

Es un recurso online de Google, que está genial. Puedes incluir tipografías molonas en tus webs sin necesidad de cargarlas en el servidor (y ahorrando así problemas con los copyrights).

Hay tipos de autor muy cools!

[al_limon]

Ojo!

Lo que te estás olvidando es, simple y llanamente, incluir el link dentro del head del documento.

[pzin]

Iniciado por al_limon

Ojo!

Lo que te estás olvidando es, simple y llanamente, incluir el link dentro del head del documento.

¿Y el <link> no es eso mismo?