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://font.ubuntu.com
• https://www.google.com/fonts/specimen/Ubuntu
• http://typecast.com/preview/google/Ubuntu
• 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
• http://scholarlykitchen.sspnet.org/2015/07/24/optical-illusions-legibility-and-how-to-choose-the-right-font
• http://www.imaginarycloud.com/blog/a-typography-workshop