How To Upload Fonts to Your Server and Display Them on Websites

I was designing a website for an ashrama. They wanted the header to be displayed in Sanskrit. So I was looking for a solution and solved it with the below solution. This may be helpful to you so thought of sharing it. This is not only for Sanskrit font But for any of the customized font you can use this technique.

If we design a website using a font that only exists locally on your computer, then the visitors of this site won't see this font unless they also have the same font installed locally on their computer. In order to make the font appear to everyone, we must upload this font file to the web server. And we need to define this new font in the cascading style sheet(CSS).

It is assumed that you have the permission to use the fonts from the font creator and also you have permission to upload the files to the server. We need to have the permissions for the font before we use them on a public website. Otherwise we can create our own fonts using the FontForge or any other typesetting software.

Below are the steps to upload a new font to the server and embed it in the website:

• Download the new font file and save this file to the desktop. If the file is compressed, extract it.
• Generally the extracted file contains the .ttf  (true type font) or .eot (Embedded open type).
• If we don;'t have .eot file, we can convert the ttf to eot also.  Because .ttf is compatible with google chrome, firefox, opera, safari and IE9. But  IE8 and below browsers we require .eot file.
• Upload these font files to the "fonts" folder of the website. If it's not there you can uplaod it to any folder of the website. If we have more than one font used in the website it's always better to create the "fonts" folder for the easy access.
• Now open the css of the website and add the below lines:  
• @font-face {
  font-family: 'Font_Name';
  src: url(directory_path/newfont.ttf);
  }
  
  
  @font-face {
  font-family: 'Font_Name';
  src: url(directory_path/newfont.eot);
  }

• You can the font weight and style and height also if you want 
• font-weight:normal;
  font-style: normal

• You can replace the actual name of font name in place of 'Font_Name' and the actual path of the font file in place of 'directory_path' also the actual .ttf and .eot file names.

That's all. Now I will tell you how you can use it in the web page. Below is the code you can use in the html file.

<           span style="color:#FFD700;font-family:'Font_Name';font-size:23px;">|| Om Sri Mahaganapathaye Namaha | |<        /span >

This will display the content with "Font_name" font. That's it. Hope this is useful. Happy coding.