UPDATE: We can now change the font size!

base/src/user_model/common.rs

@@ -127,6 +127,17 @@ fn update_style(old_value: &Style, style_path: &str, value: &str) -> Result<Styl
         "font.color" => {
             style.font.color = color(value)?;
         }
+        "font.size_delta" => {
+            // This is a special case, we need to add the value to the current size
+            let size_delta: i32 = value
+                .parse()
+                .map_err(|_| format!("Invalid value for font size: '{value}'."))?;
+            let new_size = style.font.sz + size_delta;
+            if new_size < 1 {
+                return Err(format!("Invalid value for font size: '{new_size}'."));
+            }
+            style.font.sz = new_size;
+        }
         "fill.bg_color" => {
             style.fill.bg_color = color(value)?;
             style.fill.pattern_type = "solid".to_string();

webapp/IronCalc/src/components/Toolbar/Toolbar.tsx

@@ -7,6 +7,8 @@ import type {
 import { styled } from "@mui/material/styles";
 import type {} from "@mui/system";
 import {
+  AArrowDown,
+  AArrowUp,
   AlignCenter,
   AlignLeft,
   AlignRight,
@@ -67,6 +69,7 @@ type ToolbarProperties = {
   onNumberFormatPicked: (numberFmt: string) => void;
   onBorderChanged: (border: BorderOptions) => void;
   onClearFormatting: () => void;
+  onIncreaseFontSize: (delta: number) => void;
   fillColor: string;
   fontColor: string;
   bold: boolean;
@@ -248,6 +251,28 @@ function Toolbar(properties: ToolbarProperties) {
       >
         <Type />
       </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onIncreaseFontSize(1);
+        }}
+        title={t("toolbar.increase_font_size")}
+      >
+        <AArrowUp />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onIncreaseFontSize(-1);
+        }}
+        title={t("toolbar.decrease_font_size")}
+      >
+        <AArrowDown />
+      </StyledButton>
       <StyledButton
         type="button"
         $pressed={false}

webapp/IronCalc/src/components/Workbook/Workbook.tsx

@@ -119,6 +119,10 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
     updateRangeStyle("num_fmt", numberFmt);
   };
 
+  const onIncreaseFontSize = (delta: number) => {
+    updateRangeStyle("font.size_delta", `${delta}`);
+  };
+
   const onCopyStyles = () => {
     const {
       sheet,
@@ -541,6 +545,9 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           );
           setRedrawId((id) => id + 1);
         }}
+        onIncreaseFontSize={(delta: number) => {
+          onIncreaseFontSize(delta);
+        }}
         onBorderChanged={(border: BorderOptions): void => {
           const {
             sheet,

webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -353,7 +353,7 @@ export default class WorksheetCanvas {
       ? gridColor
       : backgroundColor;
 
-    const fontSize = 13;
+    const fontSize = style.font?.sz || 13;
     let font = `${fontSize}px ${defaultCellFontFamily}`;
     let textColor = defaultTextColor;
     if (style.font) {

webapp/IronCalc/src/locale/en_us.json

@@ -16,6 +16,8 @@
     "format_number": "Format number",
     "font_color": "Font color",
     "fill_color": "Fill color",
+    "increase_font_size": "Increase font size",
+    "decrease_font_size": "Decrease font size",
     "decimal_places_increase": "Increase decimal places",
     "decimal_places_decrease": "Decrease decimal places",
     "show_hide_grid_lines": "Show/hide grid lines",