How can I convert TTF files to OTF format?

Question

I need to use @font-face feature and my fonts are in TrueType (TTF) format, so how to convert TTF to OpenType (OTF) format.

Solution 1

you can use TTF file format directly in css :

@font-face { 
font-family: Vinegar; 
src: url(http://www.4bit.co.uk/testing/design01/vinegar.ttf); 
}

h3 {
font-family: Vinegar, "Times New Roman", Times, serif;
}

It is working!

Or you can use this link to generate your font face!

Solution 2

If you are on Linux, you can use FontForge, which can be scripted from Python.

#!/usr/bin/python
import fontforge
font = fontforge.open("STIXGeneral.otf")
font.generate("STIXGeneral.ttf")

Here is a longer python script that does this for a whole directory at a time:

http://fonts.fileformat.info/bin/otf2ttf.py

Solution 3

It was painfully hard to find how to do it correctly. Here is how I got it to work on OS X

$ brew install fontforge
$ fontforge  -c 'Open("my.ttf"); Generate("my.otf")'

I was desperately looking for pip install fontforge which does not exist and I haven't got it to work with python - I guess you need to compile it with --enable-pyextension or something.

Solution 4

A quick Google search for ttf otf converter gave me a number of results, such as:

https://onlinefontconverter.com

http://www.freefontconverter.com

http://www.font2web.com

No idea how well they work, but you can try them.

Solution 5

For cross browser/mobile support you definitely need at least three formats:

1. Embedded OpenType: eot for Internet Explorer 6-8.
   There is a command line converter: http://code.google.com/p/ttf2eot/

2. Web Open Font Format: woff the W3C recommendation for webfonts: http://www.w3.org/TR/WOFF/
   A converter can be fond here: http://people.mozilla.org/~jkew/woff/

3. and TrueType: ttf for Safari and Opera

4. (You could add Scalable Vector Graphics: svg for older iOS support…)

The bulletproof @font-face Syntax is this:

@font-face {
  font-family: 'Vinegar';
  src: url('vinegar.eot?') format('embedded-opentype'),
       url('vinegar.woff') format('woff'),
       url('vinegar.ttf') format('truetype'),
       url('vinegar.svg#svgVinegar') format('svg');
}

Further resources:
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

You might also want to check out this tool:
https://github.com/zoltan-dulac/css3FontConverter

View more solutions

Comments

[tomsseisums]

Wouldn't this cause compatibility issues? have heard something like that, but ain't sure...

[Farzin Zaker]

@Tom I have never seen a compatibility issue with this syntax. it is an old syntax and is supporting by browsers since 2000!

[tomsseisums]

Well, here is an article randsco.com/index.php/2009/07/04/p680 ... scroll down to C'mon, is it Really that Simple? part, there you have it, IE only supporting *.eot. Or that's just a myth?

[Eirinn]

The site you link to doesn't seem to convert to OTF.

[AvL]

You need ttf and eot and woff! See my answer: stackoverflow.com/a/20386012/1106393

[Andrei]

I guess you need apt-get install fontforge python-fontforge or if you are on OS X try stackoverflow.com/a/26313183/179581

[Agi Hammerthief]

The latest version of IE is 11. Supporting IE 8 or lower is a waste of time unless specifically instructed by a major client. As such, the url('vinegar.eot?') format('embedded-opentype') line may be removed.

[Frerich Raabe]

Perfect answer for me, I'm on OS X as well and indeed, pip install fontforge didn't work. I already use Homebrew though, so your answer hit the nail on the head for me. :-)

[Leszek]

This is the best answer. All the online converters are worthless as either don't work or require to pay.

[alez007]

if anyone else is having problems with this solution, make sure you try this: fontforge -c "f = fontforge.open(argv[1]); f.generate(argv[2])" ~/Downloads/logo.ttf ~/Downloads/logo1.otf

[nojhan]

Got it to work after adding imports fontforge -c "import fontforge; from sys import argv; f = fontforge.open(argv[1]); f.generate(argv[2])" font.otf font.ttf

[Andrei]

Things have changed over the years. Feel free to submit it as a separate answer and edit this one to refer to it.

[jhpratt]

You should disclose that the site is (presumably) yours.