Skip to content

Commit

Permalink
add the font files!
Browse files Browse the repository at this point in the history
  • Loading branch information
o-t-w committed Jul 15, 2023
1 parent b1fe97e commit 1947647
Show file tree
Hide file tree
Showing 8 changed files with 15 additions and 11 deletions.
Binary file added MishMashMojiCOLRv1.woff2
Binary file not shown.
Binary file added MishMashMojiSVG.woff2
Binary file not shown.
26 changes: 15 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
# mishmashmoji
MishMashMoji is a color emoji font available as both OpenType-SVG and COLRv1.

![a screenshot of all the emoji from the font](./theemoji.jpg)
To have the font work in all browsers, read [this blog post](https://fullystacked.net/posts/new-font-face-syntax/#:~:text=Using%20color%20fonts%20with%20tech()).

To have the font work in all browsers, read [my blog post](https://fullystacked.net/posts/new-font-face-syntax/#:~:text=Using%20color%20fonts%20with%20tech()).
Some of the glyphs are taken from the open source [Kablammo typeface](https://fonts.withgoogle.com/kablammo), designed by Travis Kochel, with creative direction by Travis Kochel and Lizy Gershenzon, at Vectro Type. I just colored them in.

Some of the glyphs are taken from the open source [Kablammo typeface](https://fonts.withgoogle.com/kablammo), designed by Travis Kochel, with creative direction by Travis Kochel and Lizy Gershenzon, at Vectro Type. I colored them in.
![a screenshot of all the Kablammo emoji in the font](./images/kablammo.avif)

The blob glyphs are customised and colored versions of the black and white [Noto Emoji](https://fonts.google.com/noto/specimen/Noto+Emoji) font from Google, with some outlines from Kablammo.
The blob glyphs are customised and colorised versions of the non-color version of [Noto Emoji](https://fonts.google.com/noto/specimen/Noto+Emoji) from Google, with some facial expressions taken from Kablammo.

I also included some unedited versions of emoji I like from the [FxEmoji](https://github.com/mozilla/fxemoji) font from Mozilla, the Twitter emoji font, and the Microsoft emoji.
![a screenshot of all the blob emoji in the font](./images/blobs.avif)

Thank you to all the original creators.

This font only covers a very limited set of emoji.

In Chrome and Firefox you can customize the colors of the font.

![A green version of an melting face emoji](./greenemoji.avif)
![A green version of an melting face emoji](./images/greenemoji.avif)

See my [article](https://css-tricks.com/colrv1-and-css-font-palette-web-typography/) on CSS Tricks for more information.
See this [article](https://css-tricks.com/colrv1-and-css-font-palette-web-typography/) for more information.

e.g.

```css
@font-palette-values --Slime {
font-family: kablammocolor;
font-family: mishmashmoji;
base-palette: 0;
override-colors:
6 #30FA0A;
9 #30FA0A;
}

h1 {
font-family: mishmashmoji, emoji;
font-family: mishmashmoji;
font-palette: --Slime;
}
```
```

I also included some unedited versions of emoji I like from [FxEmoji](https://github.com/mozilla/fxemoji) from Mozilla, the Twitter emoji font, the color version of Noto from Google, and the Microsoft emoji font.

![a screenshot of all the Kablammo emoji in the font](./images/randomemoji.avif)
Binary file added images/blobs.avif
Binary file not shown.
File renamed without changes.
Binary file added images/kablammo.avif
Binary file not shown.
Binary file added images/randomemoji.avif
Binary file not shown.
Binary file removed theemoji.jpg
Binary file not shown.

0 comments on commit 1947647

Please sign in to comment.