JoyPixels Web Font

Using the JoyPixels web font (new starting from 5.5) is a great way to integrate JoyPixels into your website.

1. Acquire the File

Start by acquiring the file (premium emoji license required): JoyPixels Fonts.

2. Declare the @font-face

Using the web font with CSS is simple and takes just a few minutes to integrate.

We're taking special consideration for Firefox users as SBIX fonts are not compatible.

        /* declare a font face for JoyPixels */
        @font-face {
          font-family: JoyPixels;
          src:
            url('../fonts/JoyPixels.woff') format('woff'),
            url('../fonts/JoyPixels.woff2') format('woff2');
        }
        /* declare a font face for JoyPixels SVG font (Firefox only) */
        @font-face {
          font-family: JoyPixelsSVG;
          src:
            url('../fonts/JoyPixels-SVG.woff') format('woff'),
            url('../fonts/JoyPixels-SVG.woff2') format('woff2');
        }
      

If you're using this in any scenario where emoji are integrated with text, it's recommended that you target the code point range to only include emoji. Alternatively, you can tack on an additional font-face declaration that targets standard text (shown below). Because the Unicode range encapsulating all emoji may change multiple times per year as new emoji are released, this method is recommended as it should remain more stable.

        /* declare a fallback font face to target non-emoji characters */
        @font-face {
          font-family: JoyPixels;
          src:
            url('../fonts/QanelasSoft-Regular.woff') format('woff');
            /* using the unicode-range attribute to limit the reach of the JoyPixels web font */
            unicode-range: U+0000-00A8, U+00AF-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        /* same for Firefox */
        @font-face {
          font-family: JoyPixelsSVG;
          src:
            url('../fonts/QanelasSoft-Regular.woff') format('woff');
            /* using the unicode-range attribute to limit the reach of the JoyPixels web font */
            unicode-range: U+0000-00A8, U+00AF-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
      

3. Apply the font-family

Now you can apply that font-family to any specific element, or apply to the entire DOM.

        /* css applied to entire site */
        html {
          font-family: JoyPixels;
        }
        /* OR font family applied to class matching *joypixels-font */
        [class*="joypixels-font"] {
          font-family: JoyPixels;
        }
        /* apply SVG font when browser is Mozilla Firefox */
        @-moz-document url-prefix() {
          [class*="joypixels-font"] {
            font-family: JoyPixelsSVG;
          }
        }
      

See this font in action on EmojiCopy.

---

If you have any suggestions or questions, please reach out to us directly at JoyPixels.com/contact