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.

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

Also recommended:

  Responsive full screen background using only CSS

Then open the web page in code mode.

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

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.

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

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

And after that place the followoing code:

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

Go to desing mode now.

Select the text on page.

Set up the new style, you have just selected.

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.

  Create @font-face custom fonts for a website