diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
index 49d06220643d48..4c96d7736fe7e1 100644
--- a/src/display/annotation_layer.js
+++ b/src/display/annotation_layer.js
@@ -908,7 +908,7 @@ class WidgetAnnotationElement extends AnnotationElement {
       const height = Math.abs(this.data.rect[3] - this.data.rect[1]);
       computedFontSize = Math.min(fontSize, Math.round(height / LINE_FACTOR));
     }
-    style.fontSize = `${computedFontSize}%`;
+    style.fontSize = `calc(${computedFontSize}px * var(--scale-factor)`;
 
     style.color = Util.makeHexColor(fontColor[0], fontColor[1], fontColor[2]);
 
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index bb8cb6bde9d49c..d48f44409be1c8 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -41,7 +41,6 @@
   position: absolute;
   top: 0;
   left: 0;
-  font-size: calc(100px * var(--scale-factor));
   pointer-events: none;
   transform-origin: 0 0;
 }
@@ -90,7 +89,7 @@
   background-image: var(--annotation-unfocused-field-background);
   border: 1px solid transparent;
   box-sizing: border-box;
-  font: 9% sans-serif;
+  font: calc(9px * var(--scale-factor)) sans-serif;
   height: 100%;
   margin: 0;
   vertical-align: top;