JoyPixels Web Font
Using the JoyPixels web font is a great way to integrate JoyPixels into your website.
Integration has changed slightly since version 6.6. See previous install instructions here.
1. Acquire the font Files
Start by acquiring the files (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 Safari clients as SBIX is currently our only compatible version.
/*
EXAMPLE FONT IMPLEMENTATION
*/
/*
COLRv1 font.
- lightweight, top quality
- widely supported by modern browsers
- currently not by Safari (or iOS)
*/
@font-face {
font-family: JoyPixelsSVG;
src:
url('./fonts/SVG.ttf') format('truetype');
}
/*
CBDT font.
- widely supported
- currently not by Safari (or iOS)
- retain for legacy browser support
*/
@font-face {
font-family: JoyPixelsCBDT;
src:
url('./fonts/CBDT.ttf') format('truetype');
}
/*
SBIX font.
- narrowly supported
- currently required for Safari (or iOS)
- provide alternative font-family name (see below)
*/
@font-face {
font-family: JoyPixelsSBIX;
src:
url('./fonts/SBIX.ttf') format('truetype');
}
/*
OPTIMIZATIONS
--
Targeting specific platforms may provide better control
over which fonts are loaded. One method is to declare
font faces with alternative family names, and only apply
them in specfic cases.
SAFARI (requires SBIX)
- load all SBIX files as 'font-family: JoyPixelsSBIX'
- set desired css selector (e.g. .joypixels), or use 'body'
to apply to all
- use snippet below
```
_::-webkit-full-page-media, _:future, :root .joypixels {
font-family: JoyPixelsSBIX;
}
```
FIREFOX (longer support for SVG fonts than legacy Chrome)
- load all SVG files as 'font-family: JoyPixelsSVG'
- set desired css selector (e.g. .joypixels), or use 'body'
to apply to all
- use snippet below
```
_::-webkit-full-page-media, _:future, :root .joypixels {
font-family: JoyPixelsSVG;
}
```
MULTIPLE IMPORTS
--
You may take advantage of typical browser behavior that
supports hierarchical import for a font-family to condense
your logic, for example:
```
@font-face {
font-family: JoyPixels;
src:
url('..path-to-sbix/1.woff2'),
url('..path-to-svg/1.woff2'),
url('..path-to-cbdt/1.woff2');
}
```
The above declaration tries (in order) to load the defined
fonts. When a compatible format is found, no additional
url are loaded.
This also implies that you'll need a duplicate declaration
for each chunk of the font file, since due to supported
memory limitations, some formats are chunked into multiple
files.
Depending on your needs, this may help to reduce erroneous
file loading.
*/
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: JoyPixelsCBDT;
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 SVG */
@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;
}
/* same for SBIX */
@font-face {
font-family: JoyPixelsSBIX;
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.
/*
BY APPLYING THE CBDT FIRST, SEPARATELY chromium and others ignore if successfully able to load SVG
*/
.joypixels {
font-family: JoyPixelsCBDT;
}
.joypixels {
font-family: JoyPixelsSVG; /* preferred in most cases */
}
/*applying safari sbix optimization*/
_::-webkit-full-page-media, _:future, :root .joypixels {
font-family: JoyPixelsSBIX;
}
/*optional firefox optimization, typically not necessary if using the CBDT default implementation above
@supports ( -moz-appearance:none ) {
.joypixels {
font-family: JoyPixelsSVG;
}
}*/
See this font in action on EmojiCopy (settings -> Web Font).
If you have any suggestions or questions, please reach out to us directly at JoyPixels.com/contact