Processingjs Font Conversion Help

inacen

Processingjs Font Conversion Help

in Integration and Hardware • 2 years ago

I am trying to convert a GPL font to svg for use with processingjs. I cannot seem to get processingjs to recognize my several attempts at conversion, so hopefully someone on this thread can help convert this to svg:

http://www.dafont.com/champignon.font

Here's a thread for others who need their ttf/otf's converted to svg for processingjs fonts.

Replies(7)

PhiLho

Re: Processingjs Font Conversion Help

2 years ago

Well, what have you tried? If I search convert truetype to svg in Google, I see desktop and online tools.

inacen

Re: Processingjs Font Conversion Help

2 years ago

I've tried the online ttf to svg and a few of the top links for conversion

PhiLho

Re: Processingjs Font Conversion Help

2 years ago

OK, I admit it wasn't so obvious...
I think the base issue is that this file is an OTF file (open type format) instead of a TTF (true type format). The former is more advanced than the latter, so lot of utilities acting on TTF won't work on OTF.

I was curious of the usage of SVG fonts, so I tried to do the conversion. I downloaded the font.
I have Batik 1.7 installed, so I tried the command:

> java -jar C:\Java\batik-1.7\batik-ttf2svg.jar Champignon.otf -l 32 -h 126 -id Champigon -o Champignon.svg -testcard
java.lang.NullPointerException
at org.apache.batik.svggen.font.Font.read(Font.java:181)
at org.apache.batik.svggen.font.Font.create(Font.java:197)
at org.apache.batik.svggen.font.SVGFont.main(SVGFont.java:701)
at org.apache.batik.apps.ttf2svg.Main.main(Main.java:34)
null

Not much surprise...
A page reveals that FontForge can convert such file, but I prefer to go the easy route.

I went to http://onlinefontconverter.com/ and asked it to convert my OTF file to SVG.
I went to Using TTF's as PFonts in Processing.js page and downloaded the package.
I trimmed down the sample code, and put ttf-pfont-pjs.html, Champignon.svg and processing.min.js in a folder on the Web server.
Well, I saw the page, but not the font. Not sure what is wrong there.

So, while I was on the font conversion page, I asked for a TTF version of the font.
And then I used the above command (replacing otf with ttf) to get another SVG file.
Replacing the old one with the new one worked! So, here is a way for you to get your file.

therealpo..

Re: Processingjs Font Conversion Help

2 years ago

If the original font was a .ttf or .otf file (which these are, looking at what the download gives me), you do not need to convert the file for use with processing.js - it will take advantage of the fact that browsers can load truetype and opentype fonts and rely on the browser to handle the loading for you.

You will, however, need to make sure the fonts are preloaded so that the browser won't first download them for use the first time you use them in your sketch:

/* @pjs font='Champignon.otf' */
PFont myfont;
void setup()
{
size(200,200);
myfont = loadFont("Champignon.otf");
textFont(myfont,30);
}
void draw()
{
fill(0);
background(255);
text("Champignon",20,height/2);
}

johanwas

Re: Processingjs Font Conversion Help

1 years ago

I have problems getting decent fonts to work in IE9.

Seeing several nice attempts to get around it, but no really good solution for IE9.

Haven't tried to make .svg fonts, but I tried to make canvas recognise the fonts in the CSS, without any luck.

Some links:

http://processingjs.org/source/canvas-text-links/canvas-text-link.html

The font part looked promising but the sketch didn't appear at all in IE9.

Found bocoup.com a trusted place for info, but missed details on how WOFF would work in IE9 especially together with processingjs.

http://weblog.bocoup.com/canvas-in-ie9-too-good-to-be-true

Tried typeface.js but nothing went into the processingjs part.

http://typeface.neocracy.org/usage.html

So any leads on where to solve this in any other way would be great.

sujkha

Re: Processingjs Font Conversion Help

1 year ago

I wrote a little guide on how to use fonts with processing.js, check it out
http://alsoko.net/processing.js-custom-fonts/

therealpo..

Re: Processingjs Font Conversion Help

1 year ago

For IE9, you can only use fonts that are REALLY legally usable as webfonts: their permission bits need to say the font is " installable embedding allowed". Fonts come with install permissions encoded into them, so if you are not allowed to install the font, IE will refuse to use the webfont, since it requires installation.

However, for any font that has the right permission, you can use them by simply using the /* @pjs font="yourfont.ttf"; */ predirective ( http://processingjs.org/reference/font/ ) and use createFont("yourfont.ttf",<some font size>) in your sketch and have it all work.

There are loads of fonts available that aren't actually set to installable (either intentionally or because the font's creator didn't realise it had to be set to installable foruse on the web), so IE9 will refuse to load it. Other browsers are actually sort-of kind-of ignoring font permissions, which can be argued as a good or bad thing, but for IE it means: if the font says it can't be used as webfont, then you're either going to have to break the law by breaking its copyright protection (either manually or using something like fontsquirrel's @font-face generator) or you have to pick a different font =)

Top Reply