How to use stylish fonts in a website with CSS3

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

CSS3 is packed with some great features giving divine powers to web designers. One such feature is the ease with which it allows webmasters to use stylish fonts in a website.

With CSS3, you can include font(s) in real-time and stylize heading and content of a website. Here is the syntax for using stylish font in CSS3,

<div id='csfont'> Hi buddy! How are you? </div>
<style>

@font-face
 {
 font-family:customfont;  /* name your font */
 src:url('SERERG__.TTF'); /* .ttf font format for browsers */
 src:url('SERERG__.EOT'); /* .eot font format for IE */
 }

div#csfont
 {
 font-family:customfont, Verdana, Arial; /* include your font */
 font-size:20px;
 }

</style>

Important thing to note

  1. Upload fonts to your web server and include it from there. Don’t link to fonts hosted on other web servers.
  2. Always use .ttf as well as .eot versions of the stylish fonts. Internet explorer supports only .eot font format while all other web browsers support .ttf format.
  3. Always use basic fonts like Arial, Tahoma and others along-with your external font. They would be used whenever your external fonts fail to load or the website is opened in older browser that doesn’t support CSS3.
blog comments powered by Disqus