diff --git a/area.js b/area.js
index d58c65f..f66705c 100644
--- a/area.js
+++ b/area.js
@@ -37,6 +37,7 @@ const Main = imports.ui.main;
 const Screenshot = imports.ui.screenshot;
 
 const Me = ExtensionUtils.getCurrentExtension();
+const Convenience = ExtensionUtils.getSettings ? ExtensionUtils : Me.imports.convenience;
 const Elements = Me.imports.elements;
 const Files = Me.imports.files;
 const Menu = Me.imports.menu;
@@ -84,16 +85,14 @@ var DrawingArea = new Lang.Class({
         
         this.elements = [];
         this.undoneElements = [];
-        this.defaultFontFamily = 'Cantarell';
         this.currentElement = null;
         this.currentTool = Shapes.NONE;
         this.currentImage = 0;
-        this.currentFontFamily = this.defaultFontFamily;
-        this.currentFontStyle = Pango.Style.NORMAL;
-        this.currentFontWeight = Pango.Weight.NORMAL;
-        this.currentFontStretch = Pango.Stretch.NORMAL;
-        this.currentFontVariant = Pango.Variant.NORMAL;
-        this.currentTextRightAligned = false;
+        this.currentTextRightAligned = Clutter.get_default_text_direction() == Clutter.TextDirection.RTL;
+        let fontName = St.Settings && St.Settings.get().font_name || Convenience.getSettings('org.gnome.desktop.interface').get_string('font-name');
+        this.currentFont = Pango.FontDescription.from_string(fontName);
+        this.currentFont.unset_fields(Pango.FontMask.SIZE);
+        this.defaultFontFamily = this.currentFont.get_family();
         this.currentLineWidth = 5;
         this.currentLineJoin = Cairo.LineJoin.ROUND;
         this.currentLineCap = Cairo.LineCap.ROUND;
@@ -104,8 +103,6 @@ var DrawingArea = new Lang.Class({
         this.textHasCursor = false;
         this.dashedLine = false;
         this.fill = false;
-        this.newThemeAttributes = {};
-        this.oldThemeAttributes = {};
         
         this.connect('destroy', this._onDestroy.bind(this));
         this.connect('notify::reactive', this._onReactiveChanged.bind(this));
@@ -154,6 +151,30 @@ var DrawingArea = new Lang.Class({
             this.colors.push(Clutter.Color.get_static(Clutter.StaticColor.WHITE));
     },
     
+    get currentFontFamily() {
+        return this.currentFont.get_family();
+    },
+    
+    set currentFontFamily(family) {
+        this.currentFont.set_family(family);
+    },
+    
+    get currentFontStyle() {
+        return this.currentFont.get_style();
+    },
+    
+    set currentFontStyle(style) {
+        this.currentFont.set_style(style);
+    },
+    
+    get currentFontWeight() {
+        return this.currentFont.get_weight();
+    },
+    
+    set currentFontWeight(weight) {
+        this.currentFont.set_weight(weight);
+    },
+    
     get hasManipulationTool() {
         // No Object.values method in GS 3.24.
         return Object.keys(Manipulations).map(key => Manipulations[key]).indexOf(this.currentTool) != -1;
@@ -573,12 +594,7 @@ var DrawingArea = new Lang.Class({
                 shape: this.currentTool,
                 color: this.currentColor.to_string(),
                 eraser: eraser,
-                font: {
-                    family: this.currentFontFamily,
-                    weight: this.currentFontWeight,
-                    style: this.currentFontStyle,
-                    stretch: this.currentFontStretch,
-                    variant: this.currentFontVariant },
+                font: this.currentFont.to_string(),
                 text: _("Text"),
                 textRightAligned: this.currentTextRightAligned,
                 points: []
@@ -930,7 +946,7 @@ var DrawingArea = new Lang.Class({
         let index = fontWeights.indexOf(this.currentFontWeight);
         this.currentFontWeight = index == fontWeights.length - 1 ? fontWeights[0] : fontWeights[index + 1];
         if (this.currentElement && this.currentElement.font) {
-            this.currentElement.font.weight = this.currentFontWeight;
+            this.currentElement.font.set_weight(this.currentFontWeight);
             this._redisplay();
         }
         this.emit('show-osd', null, `<span font_weight="${this.currentFontWeight}">` +
@@ -940,7 +956,7 @@ var DrawingArea = new Lang.Class({
     switchFontStyle: function() {
         this.currentFontStyle = this.currentFontStyle == 2 ? 0 : this.currentFontStyle + 1;
         if (this.currentElement && this.currentElement.font) {
-            this.currentElement.font.style = this.currentFontStyle;
+            this.currentElement.font.set_style(this.currentFontStyle);
             this._redisplay();
         }
         this.emit('show-osd', null, `<span font_style="${FontStyleNames[this.currentFontStyle].toLowerCase()}">` + 
@@ -954,7 +970,7 @@ var DrawingArea = new Lang.Class({
         else
             this.currentFontFamily = (index == this.fontFamilies.length - 1) ? this.fontFamilies[0] : this.fontFamilies[index + 1];
         if (this.currentElement && this.currentElement.font) {
-            this.currentElement.font.family = this.currentFontFamily;
+            this.currentElement.font.set_family(this.currentFontFamily);
             this._redisplay();
         }
         this.emit('show-osd', null, `<span font_family="${this.currentFontFamily}">${_(this.currentFontFamily)}</span>`, "", -1, false);
diff --git a/elements.js b/elements.js
index e2b1acf..e84fccc 100644
--- a/elements.js
+++ b/elements.js
@@ -44,8 +44,6 @@ var FillRuleNames = { 0: 'Nonzero', 1: 'Evenodd' };
 var FontWeightNames = Object.assign(reverseEnumeration(Pango.Weight), { 200: "Ultra-light", 350: "Semi-light", 600: "Semi-bold", 800: "Ultra-bold" });
 delete FontWeightNames[Pango.Weight.ULTRAHEAVY];
 var FontStyleNames = reverseEnumeration(Pango.Style);
-const FontStretchNames = reverseEnumeration(Pango.Stretch);
-const FontVariantNames = reverseEnumeration(Pango.Variant);
 
 var getPangoFontFamilies = function() {
     return PangoCairo.font_map_get_default().list_families().map(fontFamily => fontFamily.get_name()).sort((a,b) => a.localeCompare(b));
@@ -85,6 +83,17 @@ const _DrawingElement = new Lang.Class({
             this.font.weight = 400;
         if (params.font && params.font.weight === 1)
             this.font.weight = 700;
+        if (params.font && typeof params.font != 'string') {
+            // compatibility with v6.2-
+            let font = new Pango.FontDescription();
+            ['family', 'weight', 'style', 'stretch', 'variant'].forEach(attribute => {
+                if (params.font[attribute] !== undefined)
+                    try {
+                        font[`set_${attribute}`](params.font[attribute]);
+                    } catch(e) {}
+            });
+            this.font = font.to_string();
+        }
         
         if (params.transform && params.transform.center) {
             let angle = (params.transform.angle || 0) + (params.transform.startAngle || 0);
@@ -594,7 +603,15 @@ const TextElement = new Lang.Class({
     Name: 'DrawOnYourScreenTextElement',
     Extends: _DrawingElement,
     
+    _init: function(params) {
+        this.parent(params);
+        this.font = Pango.FontDescription.from_string(this.font);
+    },
+    
     toJSON: function() {
+        // The font size is useless because it is always computed from the points during cairo/svg building.
+        this.font.unset_fields(Pango.FontMask.SIZE);
+        
         return {
             shape: this.shape,
             color: this.color,
@@ -603,7 +620,7 @@ const TextElement = new Lang.Class({
             text: this.text,
             lineIndex: this.lineIndex !== undefined ? this.lineIndex : undefined,
             textRightAligned: this.textRightAligned,
-            font: this.font,
+            font: this.font.to_string(),
             points: this.points.map((point) => [Math.round(point[0]*100)/100, Math.round(point[1]*100)/100])
         };
     },
@@ -630,15 +647,8 @@ const TextElement = new Lang.Class({
         if (this.points.length == 2) {
             let layout = PangoCairo.create_layout(cr);
             let fontSize = this.height * Pango.SCALE;
-            let fontDescription = new Pango.FontDescription();
-            fontDescription.set_absolute_size(fontSize);
-            ['family', 'weight', 'style', 'stretch', 'variant'].forEach(attribute => {
-                if (this.font[attribute] !== undefined)
-                    try {
-                        fontDescription[`set_${attribute}`](this.font[attribute]);
-                    } catch(e) {}
-            });
-            layout.set_font_description(fontDescription);
+            this.font.set_absolute_size(fontSize);
+            layout.set_font_description(this.font);
             layout.set_text(this.text, -1);
             this.textWidth = layout.get_pixel_size()[0];
             cr.moveTo(this.x, this.y - layout.get_baseline() / Pango.SCALE);
@@ -681,19 +691,21 @@ const TextElement = new Lang.Class({
             attributes = `fill="${color}" ` +
                          `stroke="transparent" ` +
                          `stroke-opacity="0" ` +
-                         `font-size="${height}"`;
-            
-            if (this.font.family)
-                attributes += ` font-family="${this.font.family}"`;
-            if (this.font.weight && this.font.weight != Pango.Weight.NORMAL)
-                attributes += ` font-weight="${this.font.weight}"`;
-            if (this.font.style && FontStyleNames[this.font.style])
-                attributes += ` font-style="${FontStyleNames[this.font.style].toLowerCase()}"`;
-            if (FontStretchNames[this.font.stretch] && this.font.stretch != Pango.Stretch.NORMAL)
-                attributes += ` font-stretch="${FontStretchNames[this.font.stretch].toLowerCase()}"`;
-            if (this.font.variant && FontVariantNames[this.font.variant])
-                attributes += ` font-variant="${FontVariantNames[this.font.variant].toLowerCase()}"`;
+                         `font-size="${height}" ` +
+                         `font-family="${this.font.get_family()}"`;
             
+            // this.font.to_string() is not valid to fill the svg 'font' shorthand property.
+            // Each property must be filled separately.
+            ['Stretch', 'Style', 'Variant'].forEach(attribute => {
+                let lower = attribute.toLowerCase();
+                if (this.font[`get_${lower}`]() != Pango[attribute].NORMAL) {
+                    let font = new Pango.FontDescription();
+                    font[`set_${lower}`](this.font[`get_${lower}`]());
+                    attributes += ` font-${lower}="${font.to_string()}"`;
+                }
+            });
+            if (this.font.get_weight() != Pango.Weight.NORMAL)
+                attributes += ` font-weight="${this.font.get_weight()}"`;
             row += `<text ${attributes} x="${x}" `;
             row += `y="${y}"${transAttribute}>${this.text}</text>`;
         }