How can I convert TTF files to OTF format? - css

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.

Answer 1

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

Answer 2

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.

Answer 3

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!

Answer 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.

Answer 5

For cross browser/mobile support you definitely need at least three formats:
Embedded OpenType: eot for Internet Explorer 6-8.
There is a command line converter: http://code.google.com/p/ttf2eot/
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/
and TrueType: ttf for Safari and Opera
(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

Answer 6

As mentionned by others, fontforge scripting has switched to python.
I found the easiest way was to invoke python from the command line.
I could convert multiple ttf fonts to otf on Arch Linux this way, but it should work on other distros by installing fontforge with your favorite package manager.
[user#host]$ sudo pacman -S fontforge
[user#host]$ cd /path/to/your/fonts/folder
[user#host]$ python
>>> import fontforge
>>> import os
>>> fonts = [f for f in os.listdir('.') if f.endswith('.ttf')]
>>> for font in fonts:
... f = fontforge.open(font)
... f.generate(font[:-3] + 'otf') # changes extension from ttf to otf
...
>>> exit()

Answer 7

With the Font Squirrel #font-face generator.

Answer 8

You could also try this:
http://www.freefontconverter.com/