SUNScholar/Theme/Fonts

Back to Theme

Customisation

1. Created a fonts folder in the Mirage 1 theme folder.
2. Uploaded Ubuntu fonts to the font folder created above.
3. Added the following to the Mirage 1 reset.css file.

@font-face {
    font-family: 'ubuntu-r';
    src: url('../../fonts/ubuntu-r-webfont.eot');
    src: url('../../fonts/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/ubuntu-r-webfont.woff') format('woff'),
         url('../../fonts/ubuntu-r-webfont.ttf') format('truetype'),
         url('../../fonts/ubuntu-r-webfont.svg#ubunturegular') format('svg');
}

@font-face {
    font-family: 'ubuntu-b';
    src: url('../../fonts/ubuntu-b-webfont.eot');
    src: url('../../fonts/ubuntu-b-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/ubuntu-b-webfont.woff') format('woff'),
         url('../../fonts/ubuntu-b-webfont.ttf') format('truetype'),
         url('../../fonts/ubuntu-b-webfont.svg#ubuntubold') format('svg');
}

References

• http://design.ubuntu.com/assets/ubuntu-font-family
• http://www.w3.org/TR/css3-fonts
• http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
• http://css-tricks.com/snippets/css/using-font-face
• http://www.fontsquirrel.com/tools/webfont-generator
• http://www.font-face.com