Convert Font to Webfont with Transfonter

Princess Sauniere 157 views

Website or web application platform, if you want it to be special, a distinctive font will be the best choice. However, not with the desktop fonts, cause they’re not gonna run well on your web, but web fonts do.

That’s when you need to convert font to webfont with Transfonter.

Why Do We Need to Convert Font to Webfont?

The first rule you need to know is that a desktop font is not the same as a web font.

So the basic differences are, a “desktop font” (or “standard font”) is designed to be installed and used on your computer system such as Photoshop, Illustrator, Word, etc. They normally have a .otf .ttf, or .ps1 extension corresponding with OpenType, TrueType or PostScript.

On the contrary, a web font is specially designed for the use in websites and is loaded with CSS @ font-face declaration. This makes the user’s browser downloads web fonts and renders text correctly. They come in 4 formats:

  • .eot
  • .svg
  • .ttf
  • .woff

Each one is designed to target different browsers. To build a website, you will need all of them. And that’s the main function of Tranfonter, to convert the standard font into the formats you need for a website.

How to Convert Font to Webfont With Transfonter

1. Add font from your computer
Access to the Transfonter website, click the “Add Fonts” button and select the font you want to convert from your computer.

1-add-font-from-your-computer
1. Add font from your computer

2. Select the font formats to convert
After uploading the font successfully, you need to select the font formats as explained above.

2-select-the-font-formats-to-convert
2. Select the font formats to convert

3. Convert it
Simply click the “Convert” button. Once complete, you will see the Download or Preview section.

3-convert-font-to-webfont
3. Convert font to webfont

4. Embed font on your website
Edit in the stylesheet as the below. And remember to change URL to font and font name for accuracy.

   @font-face {
    font-family: 'Sri-TSCRegular';
    src: url('sri-tsc-webfont.eot');
    src: url('sri-tsc-webfont.eot?#iefix') format('embedded-opentype'),
         url('sri-tsc-webfont.woff') format('woff'),
         url('sri-tsc-webfont.ttf') format('truetype'),
         url('sri-tsc-webfont.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
   }
   body { font-family: "Sri-TSCRegular", serif }

Final Thoughts

Once you have done it, you will see it’s a piece of cake! You just have to find a suitable font for your web, convert, embed it and voila!

We also have an article related to fonts you may be interested in: “How to Add Fonts to Photoshop?“. Also if you want to download fonts (some with the web fonts) you can click on the button below:

Download Premium Fonts

Source: CodeTot

Get Notified of New Articles

30,000+ people are already subscribed to MakiPlace blog. Leave your email to get our weekly newsletter.