htmlcssfonts

Why isn't my CSS font-face displayed as specified?


My CSS font:

@font-face {
    font-family: 'quicksandregular';
    src: url('font/quiksand2/quicksand-regular-webfont.eot');
    src: url('font/quiksand2/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/quiksand2/quicksand-regular-webfont.woff2') format('woff2'),
         url('font/quiksand2/quicksand-regular-webfont.woff') format('woff'),
         url('font/quiksand2/quicksand-regular-webfont.ttf') format('truetype'),
         url('font/quiksand2/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The body CSS:

body {
    font-size: 12px;
    padding: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #f7f2e2;
    font-family: Quicksand;
    letter-spacing: -1px;
    overflow: auto;
    position: absolute;
}

The font does not show up on my site. It does when I have the Quicksand font on my PC but when I removed that it switched to a default serif font. I want other PCs to be able to show the Quicksand font. The font folder is exactly the same in my root folder. What is my mistake?


Solution

  • You will have to put '' and your font inside that. As this is how it is being generated in the css.

    Example:

    font-family: 'quicksandregular';
    

    Hope this works.