Wappler Version : 333
Operating System : osx10.15
I add font face to attached css stylesheet then save, it previews fine but if I refresh the html file in the editor then the styling disappears & will only appear again after saving the stylesheet once more. If I preview the page with local host in my browser it loads the font with no issue, although it is delayed slightly to load and not instantly even with cached page.
After building my cordova app and running with xcode the font styling is not applied there either. This is my main concern. I followed this guide for adding custom font to cordova app, it’s the same for any web project. https://stackoverflow.com/questions/43269174/add-custom-font-to-a-cordova-project
If I load the font externally (not from assets folder) there is no issue, so I think this is an issue with how Wappler handles loads in css file from assets folder.
@font-face {
font-family: 'SFRounded-Bold';
src: url('/assets/typeface/SFRounded-Bold.eot');
src: url('/assets/typeface/SFRounded-Bold.eot?#iefix') format('embedded-opentype'),
url('/assets/typeface/SFRounded-Bold.woff2') format('woff2'),
url('/assets/typeface/SFRounded-Bold.woff') format('woff'),
url('/assets/typeface/SFRounded-Bold.ttf') format('truetype'),
url('/assets/typeface/SFRounded-Bold.svg#SFRounded-Bold') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
<head>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<script src="cordova.js"></script>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-3.4.1.min.js"></script>
<script src="page.js"></script>
<script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
</head>
How to reproduce
Host font locally, add stylesheet with above css, style some text.
Additionally test with cordova project for ios.
https://www.dropbox.com/sh/d6g9auxjwyw1lin/AAAYKbp5FahzVampyui8y_PFa?dl=0
Last updated: