One of the main issues involved with web designing is using proper fonts for the interface. That is because in most of times matching fonts for the user interface design are not standard web fonts. Therefore all the users must have the font to view the web properly. Otherwise the default fonts will be displayed.
There are some alternatives to overcome this issue. One of them is using images instead of text. So the images are rendered with the original font, and that will solve our problem. But it is also not issue free. These are the main issues with it.
Images consume more bandwidth than text. Hence it consumes time also.
Search engines are less sensitive for images. They can’t read the content of image and therefore Search Engine Optimization (SEO) will be an issue too.
Hence images are not the best option. There is another alternative, i.e. using CSS font-face. Font-face is used to define fonts in a style sheet.
@font-face {
font-family: Bambino;
src: local("Bambino"), url("Bambino.ttf") format("opentype");
}
Here, you can specify the source (src) of the font. local means if the font defined is available in the local PC, then use it. url means if it is not, download it from the given location. Let’s see how this can use.
/*
file: styles.css
"Bambino" is the font I used. "Bambino.ttf" is the relevent font file.
*/
@font-face {
font-family: Bambino;
src: local("Bambino"), url("Bambino.ttf") format("opentype");
}
h1 {
font: bold 28px Bambino;
}
p {
font: 18px Bambino;
}
<!-- file: font.html --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Typography</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum dui id arcu ornare eu lobortis orci bibendum. Mauris rhoncus tincidunt vestibulum. Duis imperdiet neque sed turpis viverra suscipit gravida est varius. Nullam euismod tellus quis velit semper vitae vehicula ligula congue.</p> </body> </html>
