Hi, curently, I am working on a pictogram family, as a picto font. It is required that each pictogram can be enclosed by a gradient-coloured circle when typing a period behind it (so, for example, typing “f” would give you a pictogram on its own, and typing a period behind it would enclose it in a circle).
It all works great as a black and white font, spacing-wise. Without going into too much detail about technicalities, I have a system worked out with negative spacing etc., now I want to substitute the black circle with a coloured one, with a gradient. I followed Rainers great tutorial on that and all worked well, the circle imports correctly. But I run into two major issues when opening the font in Ai or ID:
Illustrator: The circle does not position itself correctly. Not only are the metrics messed up, but also the vertical positioning is completely off (it appears as though the bottom of the circle is flush with the baseline, although it goes way below it in the original design).
InDesign: Same issue as with Illustrator, but on top of that, if I type e.g. f+period, the f glyph is substituted by a different glyph.
I followed up on the two forum posts that I could find with similar issues and added a custom parameter to not export an sbix table, but the issues persist,
If there is anything I’m missing, I’d greatly appreciate some help, as this would theoretically be the perfect solution for my case. Thanks!
Little annotation: I scaled the SVG graphic in Glyphs. I can’t find a way of importing it at a smaller size, exporting it from Illustrator at less px doesn’t make a difference.
This will probably become a thread of me writing updates on my process of stumbling upon the solution to my own problem.
Not scaling the SVG solves the positioning error. Now I just need to find out how to import the SVG at a smaller size. Maybe the next comment will be me again having found that out. Stay tuned.
Semi-solution found: Resize the circle within the document bounds of the SVG. Obvious solution, I know, but not a very clean one.
Update on the character replacement issue: That was just me being an idiot (as usual) and not remembering that InDesign capitalises characters automatically, So I would get F instead of f if I typed a period, which would be an entirely different pictogram.
Tthe positioning of a imported .svg in a font is tricky. Normally, the zero point in a SVG is the top left corner. But in a OpenType font, the origin is bottom left. So you need to shift the svg up by the height of the SVG (by adding a transform or some viewport stuff. But if the svg is doing stuff like this, too, it gets messy.
Can you try to set up a layer font and export it as svg? Then check the svg in that font and see if you can make your svg look like the one exported by Glyphs.
Thanks a lot for your explanation! After quite a bit of troubleshooting, the only thing that hasn’t worked so far is importing the svg at a specific size. Everything else works now, with the described workaround of sizing the artwork within the SVG layer bounds. I will leave it at that for now, as I don’t want to touch a running system
That’s exactly what I did, my artboard is 1000pt. The “fix” I described above is exactly that, I scaled down the shape on the artboard. Works great, albeit being a workaround. Thanks!
