Let’s suppose you want to use your favourite font on your website, but that particular font face isn’t included in the fonts package offered by the operating systems. There is a very simple solution. You, or your personal frontend coder, need to copy the font files in your site’s directory and to include the font through CSS styles. But wait a minute, there is a small issue.
Usually you can buy or download your favourite fonts from many places on the internet and most of them have the TrueType font (.ttf) format or OpenType font (.otf) format. You can include both of them in the CSS styles file, but even so your pages content will not be rendered correctly under all the well known major browsers. I’m offering you the solution which covers all the major well known browsers.
There is a very nice and friendly online tool, which converts any TrueType font (.ttf) or OpenType font (.otf) file to .eot, .woff and .svg files. How nice, isn’t? The tool you can find at font2web.com or at fontsquirrel.com. This useful tool also creates a CSS file and a demo HTML file to show you how to use it on your website – using CSS @font-face.
Example:
We have a very rare but nice looking font called MyFont with a .ttf file. We will upload it at the tool mentioned above and click on “Convert & Download” button. A .zip package will be downloaded on your computer which will have a directory called “fonts” with all the required font files, a demo.html example file which can be tested on all the browsers and the fonts.css file with the code you need to include into your CSS styles file.
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.eot');
src: local('☺'), url('fonts/myfont.woff') format('woff'), url('fonts/myfont.ttf') format('truetype'), url('fonts/myfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If you still have questions, give a shot below. Thanks for reading.
Great information! I’ve been looking for something like this for a while now. Thanks!