google web fonts only letters are working

I'm trying to use the font 'Cabin Sketch' I incluced the font like it says on the google web font page:

html:

<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet'   type='text/css' >

css:

body {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #dbdbdb;
font-size: 14px;
}

Letters from a-z are working but any other charakters like .!@ are not working.

In the google web font preview all characters are working.

Other fonts are working perfectly.

I'm using firefox 11.0 and Ubuntu 11.04.

I also created a issue on google font directory: http://code.google.com/p/googlefontdirectory/issues/detail?id=124

Thank you in advance.

Solution

That seems right, Which browser are you using it with? It should work for all alphabets that it uses. I tested it and it works just fine. Make sure your browser supports @font-face

jsfiddle

http://jsfiddle.net/

html page

<head>
    <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet'   type='text/css'/>
</head>
<body>
    <div id="font">
        <p>Hey yo</p>
        <p>1234</p>
        <p>! @ .</p>
    </div>
    <div id="normal">
        <p>Hey yo</p>
        <p>1234</p>
        <p>! @ .</p>
    </div>
</body>

css

body {
    padding: 100px;
}
div {
    margin: 10px;
}
#font {
    font-family: 'Cabin Sketch';
    font-style: normal;
    font-weight: 400;
    color: #333;
    font-size: 14px;
}

Preview in Chrome

preview

So it is correct, as you see above, it supports non alphabetical characters. Run the fiddle to see yourself. Hope that helps!