player-javascript
Font

Font

Since iCraft Editor's drawing font is based on WebGL, font resources need to be loaded separately. Especially in intranet environments, font resources need to be downloaded to your project in advance.

If font resources are not actively set, the default fonts from iCraft Editor server and Google will be used.

Setting Font Resources

iCraft Editor has some built-in system fonts, with AlibabaPuHuiTi as the default font. You can set font resources through the defineConfig static method, choosing either fontUrl or fonts.

fontUrl

You can set global font resources through fontUrl, which has higher priority than fonts. This is suitable for scenarios with only one font.

import { ICraftPlayer } from "@icraft/player";
 
ICraftPlayer.defineConfig({
  fontUrl: "https://icraft.gantcloud.com/api/static/font/AlibabaPuHuiTi-3-85-Bold.ttf",
});

fonts

You can set font resources through fonts, which has lower priority than fontUrl. This is suitable for scenarios with multiple fonts.

import { ICraftPlayer } from "@icraft/player";
 
ICraftPlayer.defineConfig({
  fonts: [
    {
      name: "AlibabaPuHuiTi",
      styles: [
        {
          weight: "Bold",
          fontUrl: "https://icraft.gantcloud.com/api/static/font/AlibabaPuHuiTi-3-85-Bold.ttf",
        },
      ],
    },
  ],
});
⚠️

Note: defineConfig is a static method that needs to be called at the outermost level and at the beginning

System Font Resources

Definition

interface FontFamily {
  name: string;
  styles: {
    weight: string;
    fontUrl: string;
  }[];
}
const FONTS: FontFamily[] = [
  {
    name: "AlibabaPuHuiTi",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://icraft.gantcloud.com/api/static/font/AlibabaPuHuiTi-3-55-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://icraft.gantcloud.com/api/static/font/AlibabaPuHuiTi-3-85-Bold.ttf",
      },
    ],
  },
  {
    name: "Caveat",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Caveat-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Caveat-Bold.ttf",
      },
    ],
  },
  {
    name: "Chakra Petch",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/ChakraPetch-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/ChakraPetch-Bold.ttf",
      },
    ],
  },
  {
    name: "Dancing Script",
    styles: [
      {
        weight: "Regular",
        fontUrl:
          "https://storage.googleapis.com/skia-cdn/google-web-fonts/DancingScript-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/DancingScript-Bold.ttf",
      },
    ],
  },
  {
    name: "Fredoka",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Fredoka-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Fredoka-Bold.ttf",
      },
    ],
  },
  {
    name: "Josefin Sans",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/JosefinSans-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/JosefinSans-Bold.ttf",
      },
    ],
  },
  {
    name: "Noto Sans JP",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://icraft.gantcloud.com/api/static/font/NotoSansJP-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://icraft.gantcloud.com/api/static/font/NotoSansJP-Bold.ttf",
      },
    ],
  },
  {
    name: "Noto Sans KR",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://icraft.gantcloud.com/api/static/font/NotoSansKR-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://icraft.gantcloud.com/api/static/font/NotoSansKR-Bold.ttf",
      },
    ],
  },
  {
    name: "Noto Sans Cyrillic",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/NotoSans-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/NotoSans-Bold.ttf",
      },
    ],
  },
  {
    name: "Noto Sans Hebrew",
    styles: [
      {
        weight: "Regular",
        fontUrl:
          "https://storage.googleapis.com/skia-cdn/google-web-fonts/NotoSansHebrew-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/NotoSansHebrew-Bold.ttf",
      },
    ],
  },
  {
    name: "Orbitron",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Orbitron-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Orbitron-Bold.ttf",
      },
    ],
  },
  {
    name: "Oswald",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Oswald-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Oswald-Bold.ttf",
      },
    ],
  },
  {
    name: "Philosopher",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Philosopher-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Philosopher-Bold.ttf",
      },
    ],
  },
  {
    name: "Playfair Display",
    styles: [
      {
        weight: "Regular",
        fontUrl:
          "https://storage.googleapis.com/skia-cdn/google-web-fonts/PlayfairDisplay-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl:
          "https://storage.googleapis.com/skia-cdn/google-web-fonts/PlayfairDisplay-Bold.ttf",
      },
    ],
  },
  {
    name: "Poppins",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Poppins-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Poppins-Bold.ttf",
      },
    ],
  },
  {
    name: "Quicksand",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Quicksand-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Quicksand-Bold.ttf",
      },
    ],
  },
  {
    name: "Roboto",
    styles: [
      {
        weight: "Regular",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Regular.ttf",
      },
      {
        weight: "Bold",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Bold.ttf",
      },
      {
        weight: "Italic",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Italic.ttf",
      },
      {
        weight: "BoldItalic",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-BoldItalic.ttf",
      },
      {
        weight: "Black",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Black.ttf",
      },
      {
        weight: "BlackItalic",
        fontUrl: "https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-BlackItalic.ttf",
      },
    ],
  },
];

Download

AlibabaPuHuiTi

RegularBold

Caveat

RegularBold

Chakra Petch

RegularBold

Dancing Script

RegularBold

Fredoka

RegularBold

Josefin Sans

RegularBold

Noto Sans JP

RegularBold

Noto Sans KR

RegularBold

Noto Sans Cyrillic

RegularBold

Noto Sans Hebrew

RegularBold

Orbitron

RegularBold

Oswald

RegularBold

Philosopher

RegularBold

Playfair Display

RegularBold

Poppins

RegularBold

Quicksand

RegularBold

Roboto

RegularBoldItalicBoldItalicBlackBlackItalic
More Fonts: Google Fonts
Tip
icraft-logoiCraft Editor
Copyright © 2024 GantSoftware. All rights reserved.