Css3 @fontface is now making it possible to achieve web designs with the typeface of your choice rather than just relying on a few web-safe fonts. Web designers have for years struggled to achieve creative designs using the limited number of web fonts that designers knew would be installed on everyone’s computer such as Arial, Times, Verdana and a select few others.
Here’s how to do it. Please note that this effect will only work on modern browsers supporting CSS3. You will need to upload the font to your server – making sure you are not violating any copyright rules!
This is PlaydateBold!
The above header uses the PlaydateBold font with the following CSS 3 applied to it.
- CSS 3 Font Embed (Example I)
- @font-face {
- font-family: PlaydateBold;
- src: url(‘PlaydateBold.ttf’);
- }
- .my_CSS3_class {
- font-family: PlaydateBold;
- font-size: 3.2em;
- }
