Aptos font support

Aptos font support

Posted by: abolseth on 10 October 2024, 5:57 am EST

• 

  abolseth

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 October 2024, 5:57 am EST

  Hi,

  The new Excel standard font is now Aptos Narrow. When I tried uploading a workbook to the online designer demo, SpreadJS is not rendering the Aptos font, but falls back to what looks like Times New Roman. This is quite bad as Times is an Serif font while Aptos is Sans-Serif.

  When do you plan to support the new Office standard fonts?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 14 October 2024, 3:35 am EST

  Hi,

  Yes, there seems to be a change in the default office font across all of the Office as mentioned in the following Microsoft Page at: https://support.microsoft.com/en-us/office/new-office-theme-e7bbfe02-d1fb-4c4d-b3b7-6a47f0cefd3f

  I have also escalated this to the concerned dev team on adding the support for the “Aptos” font. The internal tracking id for the same is: SJS-26849. I will let you know when there is an update on this from the dev team.

  As a workaround, you could add the “Aptos Narrow” font to the SpreadJS Designer Dropdown and also change the default theme to set the font for the worksheet. Refer to the following code snippet and the sample:

  let config = GC.Spread.Sheets.Designer.DefaultConfig;
  let fontFamily = GC.Spread.Sheets.Designer.getCommand('fontFamily');
  fontFamily.dropdownList.unshift({ text: 'Aptos Narrow', value: 'Aptos Narrow' });
  config.commandMap = {
      fontFamily: fontFamily,
  }
  // gets format dialog template
  let template = GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FormatDialogTemplate);
  // adds custom font option in format dialog template
  customFontFamilyInFormatDialogTemplate(template);
  // registers the modified format dialog template
  GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.FormatDialogTemplate, template);
  designer.setConfig(config);
  
  
  // modifies the font list in format dialog
  function customFontFamilyInFormatDialogTemplate(templateNode) {
      if (templateNode.bindingPath && templateNode.bindingPath === 'fontTabOption.fontFamily' && templateNode.items) {
          // adds custom font to font list
          templateNode.items.unshift({ text: "Aptos Narrow", value: "Aptos Narrow" });
          return;
      }
  
      let nodes = templateNode.content || templateNode.children;
      if (nodes && nodes instanceof Array) {
          nodes.forEach((subNode) => customFontFamilyInFormatDialogTemplate(subNode));
      }
  }
  
  // Apply The Theme to Already Existing Sheets
  var theme = new GC.Spread.Sheets.Theme("NewOfficeTheme", GC.Spread.Sheets.ThemeColors.Office, "Aptos", "Aptos Narrow");
  if (spread) {
      spread.sheets.forEach(function (item) {
          item.currentTheme(theme);
      });
  }
  
  // Apply the Theme to the Newly Inserted Sheets
  spread.bind(GC.Spread.Sheets.Events.SheetChanged, (sender, args) => {
      if(args.propertyName === "insertSheet") {
          let newSheet = spread.getSheetFromName(args.sheetName);
          newSheet.currentTheme(theme);
      }
  })
  

  In the below sample, the fonts “Aptos” and “Aptos Narrow” has been added to the “index.html” file:

          @font-face {
              font-family: 'Aptos Narrow';
              src: url('./aptos-narrow.ttf') format('truetype');
              font-weight: normal;
              font-style: normal;
          }
  
          /* Define Aptos font */
          @font-face {
              font-family: 'Aptos';
              font-weight: normal;
              src: url('./aptos.ttf') format('truetype');
              font-style: normal;
          }
  

  Sample: https://jscodemine.mescius.io/share/CNBni7e5mEqkRd7D4bXV9g/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  References:

  Theme Class: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Theme

  Format Dialog Template: https://developer.mescius.com/spreadjs/api/designer/classes/GC.Spread.Sheets.Designer.TemplateNames#formatdialogtemplate

  Theme Demo: https://developer.mescius.com/spreadjs/demos/features/theme/document-theme/purejs

  Regards,

  Ankit

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 21 October 2024, 2:38 am EST

  Hi,

  The developers have mentioned that, unlike the “Calibri” font in the Windows Operating System, “Aptos-Narrow” does not come pre-installed with the system. This means that if we change the default theme font to “Aptos-Narrow,” SpreadJS would be unable to detect the font through the browser, and the text would automatically default to the browser’s fallback font, likely “Serif” or “Times.” From a user’s perspective, this could appear to be a bug and may result in a significant visual discrepancy.

  Additionally, due to font copyright restrictions, we are unable to redistribute the font library. Since we don’t have control over the font availability in the browser’s fallback options, it becomes the user’s responsibility to ensure that the necessary fonts are available and accessible to the browser.

  For now, you can register the “Aptos-Narrow” font as a web font and use it in the application, as I shared in the sample earlier. Please feel free to reach out if you encounter any issues.

  Best regards,

  Ankit