Need help with Illustrator > Glyphs > InDesign color font

Glyphs
1

Hi all,

My goal is a simple “solid” bullet font in which the letters are solid white on a background shape that has a selectable color via InDesign.

I’ve looked at a few guides as well as forum content, but haven’t found a workflow I can follow yet. I am also not sure how to correctly assign Colors/Layers and (if possible) preview it within Glyphs.

I’m also not sure which type of font to use; I thought it might be SVG, but I don’t really need any SVG files - with a few icon sets I’ve made so far, I just set up my Illustrator file & copy/paste.

I can easily build the backgrounds in either Illustrator or Glyphs.

Any suggestions appreciated!

2

I don’t understand why you need a color font at all. Just set a regular font to white.

Adobe apps only support SVG fonts, but SVG fonts do not have user selectable colors (like CPAL/COLR fonts do). You would still have to create the backdrop separately. And then you might as well do a regular font.

Or can you show a mockup of what you are trying to do?

3

Hi Rainer - These are for callouts & bullets, for example.

I’m just trying to create a white letter/number on a selectable color background so that it can be used over images & illustrations and in accompanying text. The text moves around a lot, so using overlapping text isn’t going to work.

I suppose I can make a color font that isn’t changeable, so long as I can assign a bunch of colors within the font itself. I looked at the SVG tutorial, but I’m not starting with an SVG.

thanks

image
image1656×596 184 KB

4

Maybe you can make it two characters, the circle and the number and use kerning to move the number over the circle. And then you can format them individually. Maybe even use some GREP styles to make it easier?

1 Like
5

I actually had an almost identical use case recently. What I ended up doing (feel free to tell me that it’s wrong): I set the small numbers to the “Mark/Nonspacing” category and added a _center anchor to them and a center anchor to the circle component. That way, typing the circle and then the number (which I subbed with the small number in an OT feature) gave a positioning of the number in the circle as per the anchor placement. Still separately selectable.

1 Like
6

Yes. That is not a good application for a color font. Better solve it with styles provided in the app.

7

Why isn’t this a good application?

Unfortunately, this isn’t something that’s handled well in InDesign alone, since border/shading doesn’t scale.

So - that said -

  1. Can I make an SVG font with different letters/numbers having different color backgrounds?
  2. Is there a tutorial for doing this that will work with copy/paste from Illustrator rather than using an SVG file?

thanks.

8

You can set it up following this: Creating a layered color font | Glyphs
Then add a “Color Layers to SVG” parameter to the instance.
And add several color palettes with one color each. then in each instance, you can use “Color Palette for SVG” parameter to select what color to use.
But, the colors you get in the font are all sRGB. So if you need that for print and match the colors, it will be fiddly.
I made a small sample:
ColorFigures.glyphs.zip (3.4 KB)

I would not draw in Illustrator. Draw in Glyphs directly, much faster and less copy pasting.

1 Like
9

Thanks @GeorgSeifert - I’ll try this out.

[edit] The first step in Rainer’s guide says

“After you created a new font file, you need to add a new axis in *File > Font Info > Font > Axes.”

However, I don’t see any axes in the sample:

image
image1172×584 36 KB

10

I send you the wrong tutorial, sorry: Creating a Microsoft color font (CPAL/COLR) | Glyphs

1 Like
11

Thanks @GeorgSeifert - I’ll take a look.