diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx
index b3952a3a2..4935754f8 100644
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -5,8 +5,7 @@ type TextWysiwygParams = {
   x: number;
   y: number;
   strokeColor: string;
-  fontSize: number;
-  fontFamily: string;
+  font: string;
   onSubmit: (text: string) => void;
 };
 
@@ -15,8 +14,7 @@ export function textWysiwyg({
   x,
   y,
   strokeColor,
-  fontSize,
-  fontFamily,
+  font,
   onSubmit
 }: TextWysiwygParams) {
   const input = document.createElement("input");
@@ -30,8 +28,7 @@ export function textWysiwyg({
     boxShadow: "none",
     textAlign: "center",
     width: (window.innerWidth - x) * 2 + "px",
-    fontSize: fontSize + "px",
-    fontFamily,
+    font: font,
     border: "none",
     background: "transparent"
   });
diff --git a/src/index.tsx b/src/index.tsx
index 86c14f994..1ab5c975f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -83,24 +83,23 @@ function resetCursor() {
 function addTextElement(
   element: ExcalidrawTextElement,
   text: string,
-  fontSize: number,
-  fontFamily: string
+  font: string
 ) {
   resetCursor();
   if (text === null || text === "") {
     return false;
   }
   element.text = text;
-  element.font = `${fontSize}px ${fontFamily}`;
-  const font = context.font;
+  element.font = font;
+  const currentFont = context.font;
   context.font = element.font;
   const textMeasure = context.measureText(element.text);
   const width = textMeasure.width;
   const actualBoundingBoxAscent =
-    textMeasure.actualBoundingBoxAscent || fontSize;
+    textMeasure.actualBoundingBoxAscent || parseInt(font);
   const actualBoundingBoxDescent = textMeasure.actualBoundingBoxDescent || 0;
   element.actualBoundingBoxAscent = actualBoundingBoxAscent;
-  context.font = font;
+  context.font = currentFont;
   const height = actualBoundingBoxAscent + actualBoundingBoxDescent;
   // Center the text
   element.x -= width / 2;
@@ -142,8 +141,7 @@ class App extends React.Component<{}, AppState> {
     exportBackground: true,
     currentItemStrokeColor: "#000000",
     currentItemBackgroundColor: "#ffffff",
-    currentItemFontFamily: "Virgil",
-    currentItemFontSize: 20,
+    currentItemFont: "20px Virgil",
     viewBackgroundColor: "#ffffff",
     scrollX: 0,
     scrollY: 0,
@@ -699,15 +697,9 @@ class App extends React.Component<{}, AppState> {
                 x: e.clientX,
                 y: e.clientY,
                 strokeColor: this.state.currentItemStrokeColor,
-                fontSize: this.state.currentItemFontSize,
-                fontFamily: this.state.currentItemFontFamily,
+                font: this.state.currentItemFont,
                 onSubmit: text => {
-                  addTextElement(
-                    element,
-                    text,
-                    this.state.currentItemFontSize,
-                    this.state.currentItemFontFamily
-                  );
+                  addTextElement(element, text, this.state.currentItemFont);
                   elements.push(element);
                   element.isSelected = true;
                   this.setState({
@@ -947,7 +939,7 @@ class App extends React.Component<{}, AppState> {
               1,
               1,
               100
-            );
+            ) as ExcalidrawTextElement;
 
             let initText = "";
             let textX = e.clientX;
@@ -975,15 +967,13 @@ class App extends React.Component<{}, AppState> {
               initText,
               x: textX,
               y: textY,
-              strokeColor: this.state.currentItemStrokeColor,
-              fontSize: this.state.currentItemFontSize,
-              fontFamily: this.state.currentItemFontFamily,
+              strokeColor: element.strokeColor,
+              font: element.font || this.state.currentItemFont,
               onSubmit: text => {
                 addTextElement(
-                  element as ExcalidrawTextElement,
+                  element,
                   text,
-                  this.state.currentItemFontSize,
-                  this.state.currentItemFontFamily
+                  element.font || this.state.currentItemFont
                 );
                 elements.push(element);
                 element.isSelected = true;
diff --git a/src/types.ts b/src/types.ts
index 85d0cc868..ea9af6702 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -7,8 +7,7 @@ export type AppState = {
   exportBackground: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
-  currentItemFontSize: number;
-  currentItemFontFamily: string;
+  currentItemFont: string;
   viewBackgroundColor: string;
   scrollX: number;
   scrollY: number;