Use custom fonts using css & font-face

Custom fonts are really awesome, now its a part of coding practise to include them. Using css3.0, we can use @font-face to include fonts.

@font-face is supported in all major browsers i.e.- IE-9, Firefox, Opera, Chrome, and Safari. With @font-face front-end developers do no longer have to use one of the “web-safe” fonts.

Usage: Font Initialisation

@font-face { font-family: 'customFontName'; src: url('webSafeFont.eot'); /* IE9 Compatible Modes */ 
src: url('webSafeFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
url('webSafeFont.woff') format('woff'), /* Modern Browsers - IE-9+, FF, Chrome */ 
url('webSafeFont.ttf') format('truetype'), /*FF, Chrome, Safari, Android, iOS */ 
url('webSafeFont.svg#svgFontName') format('svg'); /* Legacy iOS, Chrome, Safari, Opera */ }

Font use

   font-family: customFontName;

For more info, check w3schools article on CSS3 Web Fonts.

Chandan Bora

I am a Web Coder/Tech Lead with very basic skills-set of writing. Love to do frequent research on web security, digital trends & technologies. You can connect me on Twitter @ChandanBora_.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.