Font not applied in my web application

问题:

I am working on grails web application in which I am trying to apply a font named open sans but it is not applied in my web application. The procedure which I have followed is:

I have put the code below in me extended.css file

@font-face {
    src: url('../../images/font/openSans.woff');
    font-family: 'open sans';
    /*url('openSans.woff') format('woff'),*/
    font-style: normal;
    font-weight: normal;
}

body{
    font-family: 'open sans';
}

What am I missing?

回答1:

Open Sans is a Google font, you can use it in you application as described in the link.

Add following to your view or layout

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

The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:

font-family: 'Open Sans', sans-serif;

See example here.

回答2:

Download your font from any website. got to webFont Generator. It will generate a zip file . in which got to your .css file and copy and paste code in your web within style tag. also paste all file within same directory. it will run all browser.

@font-face {
font-family: 'Philosopher';
src: url('WebRoot/fonts/philosopher-regular.eot');
src: url('WebRoot/fonts/philosopher-regular.eot?#iefix') format('embedded-opentype'),
     url('WebRoot/fonts/philosopher-regular.woff') format('woff'),
     url('WebRoot/fonts/philosopher-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

body{
font-size: 13px;
    font-family: "Philosopher";
}

this code snippet is true for philospher font. You can use any font based on this example. Enjoy.