JoyPixels Labs

version 5.5

JoyPixels Web Font

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

1. Acquire the File

Start by acquiring the file (license required): JoyPixels Downloads.

2. Declare the @font-face

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

        /* declare a font face for JoyPixels */
        @font-face {
          font-family: JoyPixels;
          src:
            url('../fonts/JoyPixels.woff') format('woff'),
            url('../fonts/JoyPixels.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 font face to target non-emoji characters */
        @font-face {
          font-family: JoyPixels;
          src:
            url('../fonts/QanelasSoft-Regular.woff') format('woff');
          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, 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.

Note: Firefox does not currently support the technology used in this font, it's important to consider a fallback solution for users reaching your site with Firefox. The solution below falls back to the system native font.

        /* css applied to entire site */
        html {
          font-family: JoyPixels;
        }
        /* font family applied to class matching *joypixels-font */
        [class*="joypixels-font"] {
          font-family: JoyPixels;
        }
        @-moz-document url-prefix() {
          [class*="native-joypixels"] {
            font-family: Arial Helvetica sans-serif;
          }
        }
      

See this font in action on EmojiCopy.


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