Skip to main content

Font picker

Setting type font_picker dùng để xuất ra trường bộ chọn phông chữ được tự động điền các phông chữ từ thư viện phông chữ Shopify. Thư viện này bao gồm các phông chữ an toàn trên web, tuyển chọn Phông chữ của Google và phông chữ được Monotype cấp phép.

Ví dụ​

  {
    id: "font_picker",
    type: "font_picker",
    label: "font_picker",
    default: {},
  },

Giao diện​

alt

Khi truy cập giá trị của image_picker dữ liệu được trả về dưới dạng :

{settings.image_picker}

Output​

Entity

Có hai kiểu dữ liệu trả về:

File font

  export interface FieldItem {
    id: string;
    fontFamily: string;
    fontWeight: string;
    italic: boolean;
    url: string;
    css: string;
    type: 'file';
  }

Google font

  export interface FieldItem {
    id: string;
    fontFamily: string;
    variants: Variant[];
    css: string;
    type: 'google';
  }

Ví dụ

Google font

{
  id: '1',
  fontFamily: 'Arial, sans-serif',
  variants: [
    { value: 'normal', weight: '400', italic: false },
    { value: 'bold', weight: '700', italic: false },
    { value: 'italic', weight: '400', italic: true },
  ],
  css: 'font-family: Arial, sans-serif; font-weight: 400; font-style: normal;',
  type: 'google',
};

File font

{
  id: '1',
  fontFamily: 'Arial, sans-serif',
  fontWeight: '400',
  italic: false,
  url: 'https://example.com/your-font-file.ttf',
  css: 'font-family: Arial, sans-serif; font-weight: 400; font-style: normal;',
  type: 'file',
};