Gradients not being retained in glyphs for color font

[Cari]

Hi there,
I’m enjoying my new “toy”. I have a decorative Celtic alphabet that I’d like to make into a color font. When I add each glyph however the gradients aren’t being kept… some stay, but others change to a solid color.

• The letter is made of overlapping shapes, plain gradient applied (no mesh), the dot outline has been “expanded”, so it’s not a dashed stroke any longer

• I’ve tried - “uniting” all similar colors

• I’ve tried - “merge” so colored parts aren’t stacked on each other, and “merge” and then “uniting” the same colors as well

• I’ve tried - adding each glyph one at a time

• I’ve tried - selecting and adding the whole collection at once

• I’ve tried - making a new font altogether and then adding the glyphs “merged”/“united” as well

Using Adobe AI (subscription plan, so current), Mac, most current version of Fontself.

I feel like I’m missing something obvious… LOL could someone could put me out of my misery pls

Cari

[urs7000]

Hello Cari and welcome to the forum.

Your font looks very interesting and complex.

Unfortunately Fontself does not understand transparencies and gradients. So you have to convert them first.

( A ) I have created a marker that contains both (glass effect). I made a copy of it for the example.

( B ) Call up the menu command Obejt > Flatten Transparency.

( C ) In the new window “Flatten Transparency” you can …

( D ) select the options shown.

( E ) I always use “Overprints”.

( F ) Confirm the selection with “OK”.

( Note ) Unfortunately, Illustrator often changes the name of the selected object with this command. So you have to assign the name to the object again in the window “Layers”.

( G ) Then you can drag the changed object with the baseline into the window “Fontself”.

( H ) Finally you see the new glyph in Fontself.

Good luck

• j.

P. S. I have described the above procedure in my German book about Fontself in chapter 2: https://www.behance.net/gallery/100356667/Buch-Font-Design-Band-1-Symbol-Fonts-erstellen

If you are interested in javascripts for Illustrator and Fontself, you can find them with explanation and download link at https://www.behance.net/jensulkriebel.

[neogrey]

That’s a very extensive and valuable tutorial, but I’m 100% positive SVG fonts do support Gradients, I’ve tested it not a long time ago and it worked. As for transparency and opacity modes, yes - they’re not supported

[neogrey]

Here’s a sample I did in 5 minutes.

and also the font itselfClashColor.otf (11.4 KB)

[urs7000]

Hi neogrey
gradients are posible in otf made by fontself. But I found a problem. If you put a gradient to all glyphs and than drag more than one glyph at the time into fontself, only the fist glyph will have the gradient.

The trick is to put the gradient (here as a circle) only in one glyph at the time, than it’s possible to drag all glyphs into fontself to get the correct result.

[Cari]

There’s no transparency in the image. Only strokes and gradients. None of the documentation that I read says that gradients won’t work.

I also tried a very simple image, in case it was maybe a complexity issue. So this image has 3 parts with gradients inside. No stroke, these were just the fills retained. You can see that one segment kept it’s gradient. But the other two segments didn’t. It’s odd that it partly works, you know? I also tried last night converting all the strokes to outlines. That didn’t fix it either. And this knot doesn’t even have strokes.

[Cari]

I have tried adding each of them all individually, not as the whole bunch. That didn’t work. It seems to be pointing to that it’ll only support a single gradient within each image?

I haven’t tried the trick with the transparency stuff yet. I’ll give that a shot next.

[Cari]

The flatten transparency thing didn’t work… maybe because there’s no transparency? Again it accepts a couple of the gradient spots, but then not the rest.
At the end of the day I can make them with solid fills rather than gradients. But you know… seems odd that it won’t work. LOL Or that it half works. Given that it partially works I feel like there’s just something I’m missing… but the fonts like “Clash” only has a single image with the gradient. Maybe it’s too many for it to deal with.

[urs7000]

Hello Cari,
I tried it with black strokes and two gradients in each glyph, see screenshot and .ai in .zip.
Only the “freehand”-gradient do not work.

If you like, you can send my one glyph in an .ai- file to check it: info@cg4u.de

– j.

gradients4fontself.ai.zip (1.1 MB)

[Cari]

You all are so much help. I really appreciate you looking into this with me.

I love software, but damnnnnn… sometimes… LOL

[Cari]

Ok… I doubled up on the gradients you sent, grouped them, and then brought them in one at a time. I think it’s definitely something with there being too many gradients in the one thing?

[neogrey]

My example was created by dragging all the 5 letters at once and then name them properly. But I assume the issue of Cari is with the number of gradients.

[Cari]

Thanks everybody! I’m going with an alternative… just a path offset and then filled with a lighter tone. Still gives some color depth, but avoids the gradient business. LOL

Seems like the most guaranteed way of not going crazy, and not running into any tech support from people who use the font if the gradients are a bit twitchy when using that many.

[urs7000]

Hello Cari,
thank you for sending the letter. I was able to find two errors in Fontself as a result.

1. in AI 2022 Fontself always uses a radial colour gradient. In AI 2020 Fontself works correctly for simple glyphs.

2. if you use the command Object > Expand to convert the radial gradient into objects, Fontself does not respect the clipping group correctly and parts outside of it become visible. This affects AI 2020 and 2022.

Test in AI 2020:

Test in AI 2022:

However, there is a solution: If you use the Expand command and then the clipping path for the Boolean operation “divide”, you can remove the superfluous parts outside the clipping path by hand. In my small example with Expand “5”, this is still easy to do. With Expand “255” and irregular shapes, it takes a lot of time.

Here, a Javascript would have to do the job, which I could programme.

– j.

[Cari]

Oh my goodness! You really ended up down the rabbit hole! Lol!
I think I’m good for my current solution. I made a little Adobe action script and it took care of things quite quickly. And as color fonts get
More popular I’m sure it’ll be addressed at some point in Fontself.