How do I make an SVG font with glyphs?

I have the full version of glyphs I just got it. I want to make svg fonts. The type of fonts that you have to do color overlay in photoshop or illustrator to change the color of the font.

So I make a font in procreate that has transparency and effects in it and then export that to my computer and after that I am lost.

I tried to trace it in illustrator and then copy it and paste it into glyphs but that just turns it into a black letter with rough edges, not at all what I want. Then I tried to save it as an sag file and then drag it into glyphs again it just created black font with rough edges.
This is a picture of the type of sag font I want to make. How on earth do I do this with glyphs?

What am I doing wrong.
here is what I do.

I draw a font in procreate with a procreate brush.

I export it to photoshop.

I clean it up in photoshop.

copy and paste it into illustrator, and trace the artwork with a preset like 16 colors.

Then one letter at a time,
I go to file> save as> .svg

I save the letter like this D.svg E.svg F.svg ect.

I go to glyphs app. create new font.

I go to glyph D.

In the layers panel I press copy and rename the copy to SVG
now I have the master layer called regular and the SVG layer.

I drag the D.svg file into the D glyph on the mater layer called regular to create the fallback glyph. it goes into glyphs as a black letter with rough edges (the solid version of my svg font)

I go to layers and click the SVG layer. Now in edit mode I drag the file D.svg into this layer.

and it still is not my SVG font it is the solid black version with about 6000 points of the SVG font that I actually want to create.

There are several threads about this right now. Can you find what you need there?

Create an sbix font with the bitmaps and also export as SVG. This tutorial covers how to do it:
https://glyphsapp.com/tutorials/creating-an-svg-color-font

I don’t know what I am doing wrong. I have tried to follow that tutorial 6 or 7 times and have read through all of the threads about SVG fonts that I could find and its just not working for me. I create the new layer name it svg and then drag my .svg file into the glyph and it is the same black fallback glyph version as what is in the master layer. Am I saving the svg file wrong? That tutorial shows a lot of code but I don’t understand where the code comes into play for my particular svg font. where do I find the code to copy and paste and where do I paste it to in glyphs? Because in the tutorial it says to copy the code below for an animated red circle. I don’t want to make an animated font just an svg opentype font. I am so confused.

and what are the opentype tables? Where do I find those and what do they have to do with making the svg font?

I have looked through the threads multiple times and it doesn’t help. I still don’t understand.

I have gone through this tutorial multiple times and I don’t know where I am going wrong. Do I need to write code for my svg font? Because in the tutorial it says to copy the code for the animated red circle but I don’t want an animated red circle I want my svg font. Also I opened the svg code for my svg graphics and saved it in a text editor. textedit is what I used and when I saved it at D.svg it was saved as D.svg.txt and that type of file will not go into glyphs. But when I drag my D.svg file that I saved from illustrator into glyphs it goes right in but it is the black fallback version of the glyph even though I am draggin it into the copied layer that I renamed SVG. Im sorry this is just not making any sense to me.

No you don’t. That is described in the tutorial. You can get your SVG table done in multiple ways. Look at “Option B”, perhaps scroll down a little, maybe you have missed that part?

option b I understand none of. The first sentence “You can depart from a layer font on multiple masters, from a CPAL/COLR setup with indexed layers (a.k.a. Microsoft color font ), or from an Apple-style sbix font.”

makes no sense to me. I don’t know what a layer font is. I don’t know what a CPAL/COLR setup with indexed layers are. I don’t know what indexed layers or Microsoft color font is and I don’t know what an apple-style sbix font is.

looking at the links for CPAL/COLR set up and layered fonts I don’t know how that is an svg font. I don’t want to make a color font. I want an svg font with transparency.

What am I doing wrong.
here is what I do.

I draw a font in procreate with a procreate brush.

I export it to photoshop.

I clean it up in photoshop.

copy and paste it into illustrator, and trace the artwork with a preset like 16 colors.

Then one letter at a time,
I go to file> save as> .svg

I save the letter like this D.svg E.svg F.svg ect.

I go to glyphs app. create new font.

I go to glyph D.

In the layers panel I press copy and rename the copy to SVG
now I have the master layer called regular and the SVG layer.

I drag the D.svg file into the D glyph on the mater layer called regular to create the fallback glyph. it goes into glyphs as a black letter with rough edges (the solid version of my svg font)

I go to layers and click the SVG layer. Now in edit mode I drag the file D.svg into this layer.

and it still is not my SVG font it is the solid black version with about 6000 points. Instead of being the actual SVG font that I designed.

What am I doing wrong?

Are we speaking about letters like in the screenshot?

Then you could keep the image data and build a “pixel” font that keeps the color details and transparency.

For your workflow above: The layer has to be called “svg” (lowercase).

thank you that was the problem.

before exporting the font do I have to do something special to make sure that the SVG version of the font is what displays by default. So that when people download the font they don’t have to turn the svg feature on? or will it just automatically be the SVG version?

If the normal outlines or the SVG is shown depends on the system or the app you are using. Nothing that the font can do.

when I try to export the font I am getting this message box

If there is a problem with autohint, perhaps try turning off autohinting.

how would I do that?

Disable the “autohinting” checkbox in the export dialog.

@orangemalorange
Hey!!! I made an account just to send you this link, because I’m trying to accomplish the same thing. The tutorial with the code is just completely…horrible, i understood not a thing lol. This one includes using software (keep scrolling to after it describes how SVG fonts work, i promise the info is here!!)

But here you are!

[link removed]

Which tutorial, and what exactly did you not understand?

The link you posted contains no information on making SVG fonts, but loads of advertisement. I removed it for suspected spam.