Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Programming languages | HTML | Set up Custom Font on a Web Page
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

Set up Custom Font on a Web Page

If you would like to enrich your web page with some not ordinary font, follow this interesting CSS tutorial.

 
  Author: NikMan | Version: CS3 | 28th June 2013 |  
 
 
1.
 

First of all, copy font file into the same directory of web page.



Also recommended:

 
 
2.
 

Then open the web page in code mode.

 
 
3.
 

Go under the tag <title> (see my pic).

 
 
4.
 

Then enter or copy the following code:

<style type="text/css">
@font-face {font-family:Steelfish; src: url("font_steelfish.ttf"); }
</style>
</head>


In my case, I have downloaded font Steelfish from dafont.com and if you need help, just place your question on forum.

 
 
5.
 

We have set up the font and it's name. It's also pisitioned in the same direcotry as web page (see the pic).

 
 
6.
 

Now go to position above the tag </style> (see the pic).

 
 
7.
 

And after that place the followoing code:

.test {font-family: Steelfish; color: #000000; font-size: 40px; text-decoration: none; }

 
 
8.
 

Go to desing mode now.

 
 
9.
 

Select the text on page.

 
 
10.
 

Set up the new style, you have just selected.

 
 
11.
 

Press key F12, to check out your final result.

Internet Explorer will probalby not show the font correctly and you will have to transofmr the .ttf file first and add a new style in CSS too. For more information drop us a comment.


 
 
 
   
  Please login to post a comment
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO