diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less
index 8e5fbb4ed..324c03a27 100644
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/apps/common/mobile/resources/less/common-ios.less
@@ -580,6 +580,14 @@
         -ms-appearance: none;
         appearance: none;
     }
+
+    // Fonts List 
+
+    .font-item {
+        .item-content {
+            padding-left: 0;
+        }
+    }
 }
 
 
diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less
index e3843cc9d..ae9e9d669 100644
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@@ -555,4 +555,12 @@
             }
         }
     }
+
+    // Fonts List 
+
+    .font-item {
+        .item-radio:not(.item-radio-icon-end) > .icon-radio {
+            margin-right: 0;
+        }
+    }
 }
diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index cc473cd9e..1584e33e9 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -860,6 +860,17 @@ input[type="number"]::-webkit-inner-spin-button {
     box-shadow: inset 0 2px red;
 }
 
+// Fonts List 
+
+.font-item {
+    .item-inner {
+        overflow: hidden;
+        &:after {
+            left: 16px;
+        }
+    }
+}
+
 
 
 
diff --git a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
index bdd96e229..3f22efa08 100644
--- a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
@@ -198,25 +198,26 @@ class EditTextController extends Component {
 
     render() {
         return (
-            <EditText changeFontSize={this.changeFontSize}
-                      changeFontFamily={this.changeFontFamily}
-                      onTextColorAuto={this.onTextColorAuto}
-                      onTextColor={this.onTextColor}
-                      onBackgroundColor={this.onBackgroundColor}
-                      toggleBold={this.toggleBold}
-                      toggleItalic={this.toggleItalic}
-                      toggleUnderline={this.toggleUnderline}
-                      toggleStrikethrough={this.toggleStrikethrough}
-                      onAdditionalStrikethrough={this.onAdditionalStrikethrough}
-                      onAdditionalCaps={this.onAdditionalCaps}
-                      onAdditionalScript={this.onAdditionalScript}
-                      changeLetterSpacing={this.changeLetterSpacing}
-                      onParagraphAlign={this.onParagraphAlign}
-                      onParagraphMove={this.onParagraphMove}
-                      onBullet={this.onBullet}
-                      onNumber={this.onNumber}
-                      onMultiLevelList={this.onMultiLevelList}
-                      onLineSpacing={this.onLineSpacing}
+            <EditText 
+                changeFontSize={this.changeFontSize}
+                changeFontFamily={this.changeFontFamily}
+                onTextColorAuto={this.onTextColorAuto}
+                onTextColor={this.onTextColor}
+                onBackgroundColor={this.onBackgroundColor}
+                toggleBold={this.toggleBold}
+                toggleItalic={this.toggleItalic}
+                toggleUnderline={this.toggleUnderline}
+                toggleStrikethrough={this.toggleStrikethrough}
+                onAdditionalStrikethrough={this.onAdditionalStrikethrough}
+                onAdditionalCaps={this.onAdditionalCaps}
+                onAdditionalScript={this.onAdditionalScript}
+                changeLetterSpacing={this.changeLetterSpacing}
+                onParagraphAlign={this.onParagraphAlign}
+                onParagraphMove={this.onParagraphMove}
+                onBullet={this.onBullet}
+                onNumber={this.onNumber}
+                onMultiLevelList={this.onMultiLevelList}
+                onLineSpacing={this.onLineSpacing}
             />
         )
     }
diff --git a/apps/documenteditor/mobile/src/store/textSettings.js b/apps/documenteditor/mobile/src/store/textSettings.js
index c35369f92..e6a64506c 100644
--- a/apps/documenteditor/mobile/src/store/textSettings.js
+++ b/apps/documenteditor/mobile/src/store/textSettings.js
@@ -42,10 +42,27 @@ export class storeTextSettings {
             resetLineSpacing: action,
             resetBackgroundColor: action,
             changeFontFamily: action,
+            iconWidth: observable,
+            iconHeight: observable,
+            thumbCanvas: observable,
+            thumbContext: observable,
+            thumbs: observable,
+            thumbIdx: observable,
+            listItemHeight: observable,
+            spriteCols: observable,
+            loadSprite: action,
             addFontToRecent:action
         });
     }
 
+    iconWidth;
+    iconHeight;
+    thumbCanvas;
+    thumbContext;
+    thumbs;
+    thumbIdx = 0;
+    listItemHeight = 28;
+    spriteCols = 1;
     fontsArray = [];
     arrayRecentFonts = [];
     fontName = '';
@@ -84,7 +101,44 @@ export class storeTextSettings {
         });
 
         this.fontsArray = array;
+        this.iconWidth = 300;
+        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
+        this.thumbCanvas = document.createElement('canvas');
+        this.thumbContext = this.thumbCanvas.getContext('2d');
+        this.thumbs = [
+            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
+            {ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
+            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
+            {ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
+            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
+        ];
+
+        const applicationPixelRatio = Common.Utils.applicationPixelRatio();
+
+        let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
+        let currentDistance = 0;
+
+        for (let i = 1; i < this.thumbs.length; i++) {
+            currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
+            if (currentDistance < (bestDistance - 0.0001))
+            {
+                bestDistance = currentDistance;
+                this.thumbIdx = i;
+            }
+        }
+
+        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
+        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
+
+        this.loadSprite();
     }
+
+    loadSprite() {
+        this.spriteThumbs = new Image();
+        this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
+        this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
+    }
+
     resetFontName (font) {
         let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
         this.fontName = name;
@@ -92,7 +146,7 @@ export class storeTextSettings {
 
     resetFontsRecent(fonts) {
         this.arrayRecentFonts = fonts;
-        this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
+        this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
     }
 
     resetFontSize (size) {
@@ -185,7 +239,7 @@ export class storeTextSettings {
 
     addFontToRecent (font) {
         this.arrayRecentFonts.forEach(item => {
-            if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
+            if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
         })
         this.arrayRecentFonts.unshift(font);
 
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index 7af30bef8..a00626bd1 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -14,13 +14,20 @@ const PageFonts = props => {
     const displaySize = typeof size === 'undefined' ? t('Edit.textAuto') : size + ' ' + t('Edit.textPt');
     const curFontName = storeTextSettings.fontName;
     const fonts = storeTextSettings.fontsArray;
-    const arrayFonts = storeTextSettings.arrayRecentFonts;
+    const iconWidth = storeTextSettings.iconWidth;
+    const iconHeight = storeTextSettings.iconHeight;
+    const thumbs = storeTextSettings.thumbs;
+    const thumbIdx = storeTextSettings.thumbIdx;
+    const thumbCanvas = storeTextSettings.thumbCanvas;
+    const thumbContext = storeTextSettings.thumbContext;
+    const spriteCols = storeTextSettings.spriteCols;
+    const spriteThumbs = storeTextSettings.spriteThumbs;
+    const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
 
     const addRecentStorage = () => {
         let arr = [];
-        arrayFonts.forEach(item => arr.push(item));
-        arr = arr.join(';');
-        LocalStorage.setItem('dde-settings-recent-fonts', arr);
+        arrayRecentFonts.forEach(item => arr.push(item));
+        LocalStorage.setItem('dde-settings-recent-fonts', JSON.stringify(arr));
     }
     
     const [vlFonts, setVlFonts] = useState({
@@ -39,6 +46,13 @@ const PageFonts = props => {
         });
     };
 
+    const getImageUri = (font) => {
+        thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
+        thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
+
+        return thumbCanvas.toDataURL();
+    }
+
     return (
         <Page>
             <Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
@@ -67,17 +81,15 @@ const PageFonts = props => {
                 </ListItem>
             </List>
             <BlockTitle>{t('Edit.textFonts')}</BlockTitle>
-            {!!arrayFonts.length &&
+            {!!arrayRecentFonts.length &&
                 <List>
-                    {arrayFonts.map((item,index) => (
-                        <ListItem
-                            key={index}
-                            radio
-                            checked={curFontName === item}
-                            title={item}
-                            style={{fontFamily: `${item}`}}
-                            onClick={() => {storeTextSettings.changeFontFamily(item); props.changeFontFamily(item);}}
-                        /> 
+                    {arrayRecentFonts.map((item, index) => (
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            storeTextSettings.changeFontFamily(item.name); 
+                            props.changeFontFamily(item.name);
+                        }}> 
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
                     ))}
                 </List>
             }
@@ -87,15 +99,14 @@ const PageFonts = props => {
             }}>
                 <ul>
                     {vlFonts.vlData.items.map((item, index) => (
-                        <ListItem
-                            key={index}
-                            radio
-                            checked={curFontName === item.name}
-                            title={item.name}
-                            style={{fontFamily: `${item.name}`}}
-                            onClick={() => {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name);
-                                storeTextSettings.addFontToRecent(item.name); addRecentStorage()}}
-                        ></ListItem>
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            storeTextSettings.changeFontFamily(item.name); 
+                            props.changeFontFamily(item.name);
+                            storeTextSettings.addFontToRecent(item); 
+                            addRecentStorage();
+                        }}>
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
                     ))}
                 </ul>
             </List>
diff --git a/apps/presentationeditor/mobile/src/store/textSettings.js b/apps/presentationeditor/mobile/src/store/textSettings.js
index e4b97a118..e82800153 100644
--- a/apps/presentationeditor/mobile/src/store/textSettings.js
+++ b/apps/presentationeditor/mobile/src/store/textSettings.js
@@ -43,10 +43,27 @@ export class storeTextSettings {
             resetTextColor: action,
             changeCustomTextColors: action,
             resetLineSpacing: action,
+            iconWidth: observable,
+            iconHeight: observable,
+            thumbCanvas: observable,
+            thumbContext: observable,
+            thumbs: observable,
+            thumbIdx: observable,
+            listItemHeight: observable,
+            spriteCols: observable,
+            loadSprite: action,
             addFontToRecent:action
         });
     }
 
+    iconWidth;
+    iconHeight;
+    thumbCanvas;
+    thumbContext;
+    thumbs;
+    thumbIdx = 0;
+    listItemHeight = 28;
+    spriteCols = 1;
     fontsArray = [];
     arrayRecentFonts = [];
     fontName = '';
@@ -85,6 +102,42 @@ export class storeTextSettings {
         });
 
         this.fontsArray = array;
+        this.iconWidth = 300;
+        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
+        this.thumbCanvas = document.createElement('canvas');
+        this.thumbContext = this.thumbCanvas.getContext('2d');
+        this.thumbs = [
+            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
+            {ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
+            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
+            {ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
+            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
+        ];
+
+        const applicationPixelRatio = Common.Utils.applicationPixelRatio();
+
+        let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
+        let currentDistance = 0;
+
+        for (let i = 1; i < this.thumbs.length; i++) {
+            currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
+            if (currentDistance < (bestDistance - 0.0001))
+            {
+                bestDistance = currentDistance;
+                this.thumbIdx = i;
+            }
+        }
+
+        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
+        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
+
+        this.loadSprite();
+    }
+
+    loadSprite() {
+        this.spriteThumbs = new Image();
+        this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
+        this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
     }
 
     resetFontName (font) {
@@ -94,7 +147,7 @@ export class storeTextSettings {
 
     resetFontsRecent(fonts) {
         this.arrayRecentFonts = fonts;
-        this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
+        this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
     }
 
     resetFontSize (size) {
@@ -215,7 +268,7 @@ export class storeTextSettings {
 
     addFontToRecent (font) {
         this.arrayRecentFonts.forEach(item => {
-            if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
+            if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
         })
         this.arrayRecentFonts.unshift(font);
 
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
index 2e9fcd1ae..45b503bd6 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
@@ -186,13 +186,20 @@ const PageFonts = props => {
     const displaySize = typeof size === 'undefined' || size == '' ? _t.textAuto : size + ' ' + _t.textPt;
     const curFontName = storeTextSettings.fontName;
     const fonts = storeTextSettings.fontsArray;
-    const arrayFonts = storeTextSettings.arrayRecentFonts;
+    const iconWidth = storeTextSettings.iconWidth;
+    const iconHeight = storeTextSettings.iconHeight;
+    const thumbs = storeTextSettings.thumbs;
+    const thumbIdx = storeTextSettings.thumbIdx;
+    const thumbCanvas = storeTextSettings.thumbCanvas;
+    const thumbContext = storeTextSettings.thumbContext;
+    const spriteCols = storeTextSettings.spriteCols;
+    const spriteThumbs = storeTextSettings.spriteThumbs;
+    const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
 
     const addRecentStorage = () => {
         let arr = [];
-        arrayFonts.forEach(item => arr.push(item));
-        arr = arr.join(';');
-        LocalStorage.setItem('ppe-settings-recent-fonts', arr);
+        arrayRecentFonts.forEach(item => arr.push(item));
+        LocalStorage.setItem('ppe-settings-recent-fonts', JSON.stringify(arr));
     }
 
     const [vlFonts, setVlFonts] = useState({
@@ -211,6 +218,13 @@ const PageFonts = props => {
         });
     };
 
+    const getImageUri = (font) => {
+        thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
+        thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
+
+        return thumbCanvas.toDataURL();
+    }
+
     const paragraph = props.storeFocusObjects.paragraphObject;
     if (!paragraph && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@@ -245,17 +259,14 @@ const PageFonts = props => {
                 </ListItem>
             </List>
             <BlockTitle>{_t.textFonts}</BlockTitle>
-            {!!arrayFonts.length &&
+            {!!arrayRecentFonts.length &&
                 <List>
-                    {arrayFonts.map((item,index) => (
-                        <ListItem
-                            key={index}
-                            radio
-                            checked={curFontName === item}
-                            title={item}
-                            style={{fontFamily: `${item}`}}
-                            onClick={() => {props.changeFontFamily(item)}}
-                        /> 
+                    {arrayRecentFonts.map((item, index) => (
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            props.changeFontFamily(item.name);
+                        }}> 
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
                     ))}
                 </List>
             }
@@ -265,15 +276,13 @@ const PageFonts = props => {
             }}>
                 <ul>
                     {vlFonts.vlData.items.map((item, index) => (
-                        <ListItem
-                            key={index}
-                            radio
-                            checked={curFontName === item.name}
-                            title={item.name}
-                            style={{fontFamily: `${item.name}`}}
-                            onClick={() => {props.changeFontFamily(item.name); storeTextSettings.addFontToRecent(item.name);
-                                addRecentStorage()}}
-                        ></ListItem>
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            props.changeFontFamily(item.name);
+                            storeTextSettings.addFontToRecent(item);
+                            addRecentStorage();
+                        }}>
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
                     ))}
                 </ul>
             </List>
diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js
index 1f577ddf5..fb43012ce 100644
--- a/apps/spreadsheeteditor/mobile/src/store/textSettings.js
+++ b/apps/spreadsheeteditor/mobile/src/store/textSettings.js
@@ -6,7 +6,7 @@ export class storeTextSettings {
             fontsArray: observable,
             fontInfo: observable,
             fontName: observable,
-            arrayRecentFonts:observable,
+            arrayRecentFonts: observable,
             fontSize: observable,
             isBold: observable,
             isItalic: observable,
@@ -23,10 +23,27 @@ export class storeTextSettings {
             initFontInfo: action,
             changeTextColor: action,
             changeCustomTextColors: action,
+            iconWidth: observable,
+            iconHeight: observable,
+            thumbCanvas: observable,
+            thumbContext: observable,
+            thumbs: observable,
+            thumbIdx: observable,
+            listItemHeight: observable,
+            spriteCols: observable,
+            loadSprite: action,
             addFontToRecent:action
         });
     }
     
+    iconWidth;
+    iconHeight;
+    thumbCanvas;
+    thumbContext;
+    thumbs;
+    thumbIdx = 0;
+    listItemHeight = 28;
+    spriteCols = 1;
     fontsArray = [];
     arrayRecentFonts = [];
     fontInfo = {};
@@ -88,6 +105,42 @@ export class storeTextSettings {
         });
 
         this.fontsArray = array;
+        this.iconWidth = 300;
+        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
+        this.thumbCanvas = document.createElement('canvas');
+        this.thumbContext = this.thumbCanvas.getContext('2d');
+        this.thumbs = [
+            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
+            {ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
+            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
+            {ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
+            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
+        ];
+
+        const applicationPixelRatio = Common.Utils.applicationPixelRatio();
+
+        let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
+        let currentDistance = 0;
+
+        for (let i = 1; i < this.thumbs.length; i++) {
+            currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
+            if (currentDistance < (bestDistance - 0.0001))
+            {
+                bestDistance = currentDistance;
+                this.thumbIdx = i;
+            }
+        }
+
+        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
+        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
+
+        this.loadSprite();
+    }
+
+    loadSprite() {
+        this.spriteThumbs = new Image();
+        this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
+        this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
     }
 
     initFontInfo(fontObj) {
@@ -96,7 +149,7 @@ export class storeTextSettings {
 
     addFontToRecent (font) {
         this.arrayRecentFonts.forEach(item => {
-            if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
+            if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
         })
         this.arrayRecentFonts.unshift(font);
 
@@ -130,7 +183,7 @@ export class storeTextSettings {
 
     resetFontsRecent(fonts) {
         this.arrayRecentFonts = fonts;
-        this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
+        this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
     }
 
     changeCustomTextColors (colors) {
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
index ce149ed53..377b8f88b 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
@@ -128,13 +128,20 @@ const PageFontsCell = props => {
     const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
     const curFontName = fontInfo.name;
     const fonts = storeCellSettings.fontsArray;
-    const arrayFonts = storeTextSettings.arrayRecentFonts;
+    const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
+    const iconWidth = storeTextSettings.iconWidth;
+    const iconHeight = storeTextSettings.iconHeight;
+    const thumbs = storeTextSettings.thumbs;
+    const thumbIdx = storeTextSettings.thumbIdx;
+    const thumbCanvas = storeTextSettings.thumbCanvas;
+    const thumbContext = storeTextSettings.thumbContext;
+    const spriteCols = storeTextSettings.spriteCols;
+    const spriteThumbs = storeTextSettings.spriteThumbs;
 
     const addRecentStorage = () => {
         let arr = [];
-        arrayFonts.forEach(item => arr.push(item));
-        arr = arr.join(';');
-        LocalStorage.setItem('sse-settings-recent-fonts', arr);
+        arrayRecentFonts.forEach(item => arr.push(item));
+        LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
     }
 
     const [vlFonts, setVlFonts] = useState({
@@ -153,6 +160,13 @@ const PageFontsCell = props => {
         });
     };
 
+    const getImageUri = (font) => {
+        thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
+        thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
+
+        return thumbCanvas.toDataURL();
+    }
+
     const storeFocusObjects = props.storeFocusObjects;
     if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@@ -185,17 +199,14 @@ const PageFontsCell = props => {
                 </ListItem>
             </List>
             <BlockTitle>{_t.textFonts}</BlockTitle>
-            {!!arrayFonts.length &&
+            {!!arrayRecentFonts.length &&
                 <List>
-                    {arrayFonts.map((item,index) => (
-                        <ListItem
-                            key={index}
-                            radio
-                            checked={curFontName === item}
-                            title={item}
-                            style={{fontFamily: `${item}`}}
-                            onClick={() => {props.onFontClick(item)}}
-                        /> 
+                    {arrayRecentFonts.map((item,index) => (
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            props.onFontClick(item.name);
+                        }}> 
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
                     ))}
                 </List>
             }
@@ -205,15 +216,13 @@ const PageFontsCell = props => {
             }}>
                 <ul>
                     {vlFonts.vlData.items.map((item, index) => (
-                        <ListItem
-                            key={index}
-                            radio
-                            checked={curFontName === item.name}
-                            title={item.name}
-                            style={{fontFamily: `${item.name}`}}
-                            onClick={() => {props.onFontClick(item.name); storeTextSettings.addFontToRecent(item.name);
-                                addRecentStorage()}}
-                        ></ListItem>
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            props.onFontClick(item.name);
+                            storeTextSettings.addFontToRecent(item); 
+                            addRecentStorage();
+                        }}>
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
                     ))}
                 </ul>
             </List>
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
index 4628aad5f..7d043fb58 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
@@ -99,13 +99,20 @@ const PageFonts = props => {
     const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
     const curFontName = storeTextSettings.fontName;
     const fonts = storeTextSettings.fontsArray;
-    const arrayFonts = storeTextSettings.arrayRecentFonts;
+    const iconWidth = storeTextSettings.iconWidth;
+    const iconHeight = storeTextSettings.iconHeight;
+    const thumbs = storeTextSettings.thumbs;
+    const thumbIdx = storeTextSettings.thumbIdx;
+    const thumbCanvas = storeTextSettings.thumbCanvas;
+    const thumbContext = storeTextSettings.thumbContext;
+    const spriteCols = storeTextSettings.spriteCols;
+    const spriteThumbs = storeTextSettings.spriteThumbs;
+    const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
 
     const addRecentStorage = () => {
         let arr = [];
-        arrayFonts.forEach(item => arr.push(item));
-        arr = arr.join(';');
-        LocalStorage.setItem('sse-settings-recent-fonts', arr);
+        arrayRecentFonts.forEach(item => arr.push(item));
+        LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
     }
 
     const [vlFonts, setVlFonts] = useState({
@@ -124,6 +131,13 @@ const PageFonts = props => {
         });
     };
 
+    const getImageUri = (font) => {
+        thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
+        thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
+
+        return thumbCanvas.toDataURL();
+    }
+
     return (
         <Page>
             <Navbar title={_t.textFonts} backLink={_t.textBack}>
@@ -150,17 +164,14 @@ const PageFonts = props => {
                 </ListItem>
             </List>
             <BlockTitle>{_t.textFonts}</BlockTitle>
-            {!!arrayFonts.length &&
+            {!!arrayRecentFonts.length &&
                 <List>
-                    {arrayFonts.map((item,index) => (
-                        <ListItem
-                            key={index}
-                            radio
-                            checked={curFontName === item}
-                            title={item}
-                            style={{fontFamily: `${item}`}}
-                            onClick={() => {props.changeFontFamily(item)}}
-                        /> 
+                    {arrayRecentFonts.map((item, index) => (
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            props.changeFontFamily(item.name);
+                        }}> 
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
                     ))}
                 </List>
             }
@@ -170,15 +181,13 @@ const PageFonts = props => {
             }}>
                 <ul>
                     {vlFonts.vlData.items.map((item, index) => (
-                        <ListItem
-                            key={index}
-                            radio
-                            checked={curFontName === item.name}
-                            title={item.name}
-                            style={{fontFamily: `${item.name}`}}
-                            onClick={() => {props.changeFontFamily(item.name); storeTextSettings.addFontToRecent(item.name);
-                                addRecentStorage()}}
-                        ></ListItem>
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            props.changeFontFamily(item.name);
+                            storeTextSettings.addFontToRecent(item);
+                            addRecentStorage();
+                        }}>
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
                     ))}
                 </ul>
             </List>