Written by me@grafxflow
11 Sep, 2012
0
3,874
I have always thought that using custom fonts via @font-face was only possible via CSS3, but actually it goes as far back as ie6 with CSS2.
How to do this:
1. To get around the compatible with different browsers it has to be in several different formats (.woff, .ttf, .svg and .eot).
2. It must be FREE for using over the internet. Here is a list of websites which do FREE fonts.
3. Implement it via CSS using the following code.
@font-face {
font-family: 'font_class_name';
src: url('font_name.eot');
src: url('font_name.eot?#iefix') format('embedded-opentype'),
url('font_name.woff') format('woff'),
url('font_name.ttf') format('truetype'),
url('font_name.svg#font_class_name') format('svg');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'font_class_name';
color: #FF0000;
}
12 Jan, 2010
25 Mar, 2010
13 Jan, 2019
I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!
Follow
20 May, 2025
11 Jul, 2023
Views: 169,311
Views: 41,886
Views: 39,671
Views: 36,494
