New web

Web pattern library, style and technical reference

Resources

Fonts

Fuse V.2

Asset ID Filename Example @font-face
#334815 fuse_v.2_display_black_italic.woff FUSE BLACK ITALIC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* fuse_v.2_display_black_italic */
  font-family: 'FuseV2';
  src: url('./?a=334816') format('woff2'),
       url('./?a=334815') format('woff');
  font-weight: 900;
  font-style: italic;
}
#334816 fuse_v.2_display_black_italic.woff2
#334817 fuse_v.2_display_black.woff FUSE BLACK
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* fuse_v.2_display_black */
  font-family: 'FuseV2';
  src: url('./?a=334818') format('woff2'),
       url('./?a=334817') format('woff');
  font-weight: 900;
  font-style: normal;
}
#334818 fuse_v.2_display_black.woff2
#334819 fuse_v.2_display_bold_italic.woff FUSE BOLD ITALIC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* fuse_v.2_display_bold_italic */
  font-family: 'FuseV2';
  src: url('./?a=334820') format('woff2'),
       url('./?a=334819') format('woff');
  font-weight: 600;
  font-style: italic;
}
#334820 fuse_v.2_display_bold_italic.woff2
#334821 fuse_v.2_display_bold.woff FUSE BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* fuse_v.2_display_bold */
  font-family: 'FuseV2';
  src: url('./?a=334822') format('woff2'),
       url('./?a=334821') format('woff');
  font-weight: 600;
  font-style: normal;
}
#334822 fuse_v.2_display_bold.woff2
#334824 fuse_v.2_display_book_italic.woff FUSE BOOK ITALIC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* fuse_v.2_display_book_italic */
    font-family: 'FuseV2';
    src: url('./?a=334825') format('woff2'),
         url('./?a=334824') format('woff');
    font-weight: normal;
    font-style: italic;
}
#334825 fuse_v.2_display_book_italic.woff2
#334826 fuse_v.2_display_book.woff FUSE BOOK
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* fuse_v.2_display_book */
    font-family: 'FuseV2';
    src: url('./?a=334827') format('woff2'),
         url('./?a=334826') format('woff');
    font-weight: normal;
    font-style: normal;
}
#334827 fuse_v.2_display_book.woff2

Heuristica

Asset ID Filename Example @font-face
#339561 heuristica_regular.woff Heuristica Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* heuristica_regular */
    font-family: 'Heuristica';
    src: url('./?a=339558') format('woff2'),
         url('./?a=339561') format('woff');
    font-weight: normal;
    font-style: normal;
}
#339558 heuristica_regular.woff2
#339564 heuristica_italic.woff Heuristica Regular Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* heuristica_italic */
    font-family: 'Heuristica';
    src: url('./?a=339565') format('woff2'),
         url('./?a=339564') format('woff');
    font-weight: normal;
    font-style: italic;
}
#339565 heuristica_italic.woff2
#339562 heuristica_bold.woff Heuristica Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* heuristica_bold */
    font-family: 'Heuristica';
    src: url('./?a=339559') format('woff2'),
         url('./?a=339562') format('woff');
    font-weight: bold;
    font-style: normal;
}
#339559 heuristica_bold.woff2
#339563 heuristica_bold_italic.woff Heuristica Bold Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
@font-face { /* heuristica_bold_italic */
    font-family: 'Heuristica';
    src: url('./?a=339563') format('woff2'),
         url('./?a=339566') format('woff');
    font-weight: bold;
    font-style: italic;
}
#339566 heuristica_bold_italic.woff2

Icons8

Asset ID Filename Usage
#376120 uon-icons8-210717.woff
#376121 uon-icons8-210717.woff2

Font Awesome

Asset ID Filename Usage