search

thedemons / merge_color_emoji_font

How to merge color emoji font into a base font.
42 stars 2 forks source link

Fontlab 8 couldn't export colour emoji in ttf file #6

Open dextercva opened 1 year ago

dextercva commented 1 year ago

I have followed your instructions. I got the font and emoji but emojis are black and white. In Fontlab 8, by clicking ppm icon I can view everything as colour as it is. But when exported, it lost the colour. Can you show me how to export color ttf?

These two ttf files, this is for Android OS Noto Color Emoji Font - Roboto-Regular

HASANxJAFRY commented 1 year ago

same is happening with me if u find any solution can u mail me at jafrihasan7@gmail.com

HASANxJAFRY commented 1 year ago

I have followed your instructions. I got the font and emoji but emojis are black and white. In Fontlab 8, by clicking ppm icon I can view everything as colour as it is. But when exported, it lost the colour. Can you show me how to export color ttf?

same is happening with m if u find any solution mail me jafrihasan7@gmail.com

dextercva commented 1 year ago

@HASANxJAFRY Okay sure. If you find any alternative, comment on this thread :)

HASANxJAFRY commented 1 year ago

@HASANxJAFRY Okay sure. If you find any alternative, comment on this thread :)

i tried everything but vant get any solution i want to merge ios emoji with roboto font can u help me

dextercva commented 1 year ago

Nope. I don't know how to do it.

eravinn commented 1 year ago

you can still download the Fontlab 7 give a try

dextercva commented 1 year ago

you can still download the Fontlab 7 give a try

I tried Fontlab 7, emojis are not in colour format when exported. If you know any solutions, say it.

brunostjohn commented 1 year ago

I don't know if you guys are still looking for a solution, but I found one. I wanted to use Google Sans with Apple Emojis and went down the rabbit hole of learning about how fonts work etc.

Why doesn't it work?

How to solve this problem.

  1. Get all Apple Emoji PNGs. I solved that problem by going to this repo and getting the PNGs.
  2. Make them into SVGs. That's the tricky part. Vector images are very different form pixel images and hence their structure is different. My solution was to use the vtracer project to trace and convert the images. Be warned, this is lossy and makes some emojis look a bit weird. I haven't nailed how to do this part properly. This is my incredibly basic solution to converting the images: 
    
const fs = require("fs");
const path = require("path");
const child_process = require("child_process");

function create_emoji_svg(file) { child_process.execSync( vtracer --input ${path.join( __dirname, "apple-emoji-linux", "png", "160", file )} --output ${path.join( __dirname, "build", "svg", file.slice(0, -4) + ".svg" )} -p 8 --colormode color -m pixel, { stdio: "inherit" } ); }

if (fs.existsSync(path.join(dirname, "build"))) { fs.rmSync(path.join(dirname, "build"), { recursive: true, force: true, }); }

fs.mkdirSync(path.join(dirname, "build")); fs.mkdirSync(path.join(dirname, "build", "svg"));

fs.readdirSync(path.join(__dirname, "apple-emoji-linux", "png", "160")).forEach( (file) => create_emoji_svg(file) );

3. Make a font with the COLR table.
Another tricky part. Mozilla and Google have their own tools for this and both are oddly unstable and meh. I've ended up going with [Google's tool](https://github.com/googlefonts/nanoemoji) because it was more up to date and less shite overall. While compiling an emoji font, it still frequently crashes and is a massive pain in the ass to use. This is the command I've used to compile the emoji font: 
```bash
(nanoemoji) brunostjohn@Cloud:~/nanoemoji$ nanoemoji --ignore_reuse_error -v 0 --color_format=glyf_colr_0 $(find ./svg -name '*.svg')

Even compiling a small-ish font takes absolutely ages. Even as I'm writing this the final product of this is being produced because there's 4k apple emojis. Once it's done, use FontLab to merge the produced emoji font with your text font and bob's your uncle. I've taken the time to compile a proof of concept font. Example below. Screenshot taken on an S23 Ultra running stock software and displaying the font using Z-Font As you can see, it slightly looks off but, well, it's worked. I now have an obscene amount of useless font knowledge. But hey, non-ugly emojis.

eravinn commented 1 year ago

i am stuck at vtracer point can you help me?

brunostjohn commented 1 year ago

I've uploaded the stuff I'm using to make this work and a small ish explanation to a repo here. Please read that and take a look at the GitHub Actions workflow. That should explain everything. This is a little bit technical so if you don't have the patience, it's not worth it.

alborus commented 1 year ago

hey, im looking for that for few days yours is only one explained well but i am not keen on like that technical things can you share a link for your font thanks in advance

brunostjohn commented 1 year ago

I will share a link to it once it finishes compiling. I'm rendering it on my PC which has been working on it for 4 hours now and also on github actions. You can follow its progress here.

alborus commented 1 year ago

thanks a lot <3

HASANxJAFRY commented 1 year ago

I don't know if you guys are still looking for a solution, but I found one. I wanted to use Google Sans with Apple Emojis and went down the rabbit hole of learning about how fonts work etc.

Why doesn't it work?

  • The emojis you're trying to use aren't in COLR format but in SBIX or CBDT or SVG.
  • This means that, while being correctly exported by FontLab, there is no COLR table it can go off of and just exports no glyphs. If you export as svg, the bitmaps will get converted into SVGs (sort of) and then into other formats.

How to solve this problem.

  1. Get all Apple Emoji PNGs. I solved that problem by going to this repo and getting the PNGs.
  2. Make them into SVGs. That's the tricky part. Vector images are very different form pixel images and hence their structure is different. My solution was to use the vtracer project to trace and convert the images. Be warned, this is lossy and makes some emojis look a bit weird. I haven't nailed how to do this part properly. This is my incredibly basic solution to converting the images:
const fs = require("fs");
const path = require("path");
const child_process = require("child_process");

function create_emoji_svg(file) {
  child_process.execSync(
    `vtracer --input ${path.join(
      __dirname,
      "apple-emoji-linux",
      "png",
      "160",
      file
    )} --output ${path.join(
      __dirname,
      "build",
      "svg",
      file.slice(0, -4) + ".svg"
    )} -p 8 --colormode color -m pixel`,
    { stdio: "inherit" }
  );
}

if (fs.existsSync(path.join(__dirname, "build"))) {
  fs.rmSync(path.join(__dirname, "build"), {
    recursive: true,
    force: true,
  });
}

fs.mkdirSync(path.join(__dirname, "build"));
fs.mkdirSync(path.join(__dirname, "build", "svg"));

fs.readdirSync(path.join(__dirname, "apple-emoji-linux", "png", "160")).forEach(
  (file) => create_emoji_svg(file)
);
  1. Make a font with the COLR table. Another tricky part. Mozilla and Google have their own tools for this and both are oddly unstable and meh. I've ended up going with Google's tool because it was more up to date and less shite overall. While compiling an emoji font, it still frequently crashes and is a massive pain in the ass to use. This is the command I've used to compile the emoji font:
(nanoemoji) brunostjohn@Cloud:~/nanoemoji$ nanoemoji --ignore_reuse_error -v 0 --color_format=glyf_colr_0 $(find ./svg -name '*.svg')

Even compiling a small-ish font takes absolutely ages. Even as I'm writing this the final product of this is being produced because there's 4k apple emojis. Once it's done, use FontLab to merge the produced emoji font with your text font and bob's your uncle. I've taken the time to compile a proof of concept font. Example below. Screenshot taken on an S23 Ultra running stock software and displaying the font using Z-Font As you can see, it slightly looks off but, well, it's worked. I now have an obscene amount of useless font knowledge. But hey, non-ugly emojis.

man can u merge a ios and a roboto font for me ill send u files on telegram it would be very helpfull ive been looking to do this for years

NontKrub commented 1 year ago

I don't know if you guys are still looking for a solution, but I found one. I wanted to use Google Sans with Apple Emojis and went down the rabbit hole of learning about how fonts work etc.

Why doesn't it work?

  • The emojis you're trying to use aren't in COLR format but in SBIX or CBDT or SVG.
  • This means that, while being correctly exported by FontLab, there is no COLR table it can go off of and just exports no glyphs. If you export as svg, the bitmaps will get converted into SVGs (sort of) and then into other formats.

How to solve this problem.

  1. Get all Apple Emoji PNGs. I solved that problem by going to this repo and getting the PNGs.
  2. Make them into SVGs. That's the tricky part. Vector images are very different form pixel images and hence their structure is different. My solution was to use the vtracer project to trace and convert the images. Be warned, this is lossy and makes some emojis look a bit weird. I haven't nailed how to do this part properly. This is my incredibly basic solution to converting the images:
const fs = require("fs");
const path = require("path");
const child_process = require("child_process");

function create_emoji_svg(file) {
  child_process.execSync(
    `vtracer --input ${path.join(
      __dirname,
      "apple-emoji-linux",
      "png",
      "160",
      file
    )} --output ${path.join(
      __dirname,
      "build",
      "svg",
      file.slice(0, -4) + ".svg"
    )} -p 8 --colormode color -m pixel`,
    { stdio: "inherit" }
  );
}

if (fs.existsSync(path.join(__dirname, "build"))) {
  fs.rmSync(path.join(__dirname, "build"), {
    recursive: true,
    force: true,
  });
}

fs.mkdirSync(path.join(__dirname, "build"));
fs.mkdirSync(path.join(__dirname, "build", "svg"));

fs.readdirSync(path.join(__dirname, "apple-emoji-linux", "png", "160")).forEach(
  (file) => create_emoji_svg(file)
);
  1. Make a font with the COLR table. Another tricky part. Mozilla and Google have their own tools for this and both are oddly unstable and meh. I've ended up going with Google's tool because it was more up to date and less shite overall. While compiling an emoji font, it still frequently crashes and is a massive pain in the ass to use. This is the command I've used to compile the emoji font:
(nanoemoji) brunostjohn@Cloud:~/nanoemoji$ nanoemoji --ignore_reuse_error -v 0 --color_format=glyf_colr_0 $(find ./svg -name '*.svg')

Even compiling a small-ish font takes absolutely ages. Even as I'm writing this the final product of this is being produced because there's 4k apple emojis. Once it's done, use FontLab to merge the produced emoji font with your text font and bob's your uncle. I've taken the time to compile a proof of concept font. Example below. Screenshot taken on an S23 Ultra running stock software and displaying the font using Z-Font As you can see, it slightly looks off but, well, it's worked. I now have an obscene amount of useless font knowledge. But hey, non-ugly emojis.

@brunostjohn Hi,

I recently followed your guide in this comment and I got some errors. Is it a Python error or something I don't know. So I didn't get the finished file so... can you help me with this one (I using a VM to build it). In optional if you have the finished files that will be great.

Thanks! image