Written by me@grafxflow
11 Sep, 2012
0
3,353
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
13 Jan, 2019
02 Aug, 2015
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
11 Jul, 2023
21 Jun, 2023
25 Nov, 2022
20 Sep, 2022
Views: 162,529
Views: 38,774
Views: 34,574
Views: 31,919
