-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
15 additions
and
11 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 not shown.
File renamed without changes.
Binary file not shown.
Binary file not shown.
Binary file not shown.