How to use custom fonts in HTML5
Custom font implementation in your website is preferably performed by means of @font-face. This is done by invoking different custom fonts in the CSS file. To reassure a correct old and new browser custom font implementation you need to invoke four different font types: OTF/TTF, SVG, WOFF and EOT (please make sure you always invoke or OTF or TTF!). Next you could invoke custom fonts for specific elements. Please find below an example which is compatible with old browsers, new browsers, tablets and smartphones.
Call the custom font:
@font-face {
font-family: 'Rolka';
src: url('Rolka.eot'); /* IE 5-8 */
src: local('?'), /* trick IE */
url('Rolka.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('Rolka.ttf') format('truetype'), /* Opera, Safari */
url('Rolka.svg#font') format('svg'); /* iOS */
}
Apply the custom font:
h1, p{
font-family: 'Rolka', 'Georgia', serif;
}
@font-face {
font-family: 'Rolka';
src: url('Rolka.eot'); /* IE 5-8 */
src: local('?'), /* trick IE */
url('Rolka.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('Rolka.ttf') format('truetype'), /* Opera, Safari */
url('Rolka.svg#font') format('svg'); /* iOS */
}
Apply the custom font:
h1, p{
font-family: 'Rolka', 'Georgia', serif;
}