Importing a font with pure CSS

Question

I'm trying to get a Google font on my website. It works if I put this code in each HTML file.

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:700' rel='stylesheet' type='text/css'>

I want to be efficient and only access the font in my main CSS file, but I don't understand why the font doesn't display without the HTML part.

@font-face {
    font-family: "Cinzel Decorative";
    src: url("http://fonts.googleapis.com/css?family=Cinzel+Decorative:700") }
html, body {
    background-color: #C00;
    color: #600;
    font-family: "Cinzel Decorative", serif;
    font-size: 112.5%;
    text-align: center }

Answer 1

It does not work that way because the src property in a @font-face rule must refer to a font file, not to a CSS file.

If you really want to use @font-face in your own code, you need to download the font, create different formats from it using e.g. FontSquirrel webfont generator, which also produces a sample file containing the code needed, and upload the relevant files onto your server.

If you just want to do things in CSS instead of using the link element, use an @import rule at the start of your style sheet. It does not imply any efficiency improvement, though. Example:

<style>
@import url("http://fonts.googleapis.com/css?family=Cinzel+Decorative:700");
html, body {
    background-color: #C00;
    color: #600;
    font-family: "Cinzel Decorative", serif;
    font-size: 112.5%;
    text-align: center;
    font-weight: 700; /* should be used since you refer to 700 weight typeface */
}
</style>
Hello world