But custom fonts were working in subdirectories and don’t seem to be now. Will they work differently from the regular builds?
Custom fonts should be placed in web app folder in server. And needs to add @font-face rule into index.html
Here a sample of using Web Font Loader to load custom fonts. Tested on FF, Opera, Chrome, Safari - works.
<head>
…
<style type = “text/css”>
@font-face {
font-family: “Exo2-Regular”;
src: url(“Exo2-Regular.ttf”);
}
@font-face {
font-family: “OpenSans-Regular”;
src: url(“OpenSans-Regular.ttf”);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: [‘Exo2-Regular’, ‘OpenSans-Regular’]
}
});
</script>
…
</head>
a bit later it will be integrated in html5 builder
Why the change? Or will this make things like alignment etc work?
yes, making it fully compatible with other platforms
Hi,
I guess I’ll wait for the integration. I was not able to get this code to work. Tried many different attempts and different fonts. Fonts that are already installed on my system do work though without any font loading, but that isn’t portable.
-dev
Improved code. Working for me!
\<style type = "text/css"\> @font-face { font-family: "myCustomFont1"; src: url("myCustomFont1.ttf"); } @font-face { font-family: "myCustomFont2"; src: url("myCustomFont2.ttf"); } \</style\> \<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"\>\</script\> \<script\> WebFont.load({ custom: { families: ['myCustomFont1', 'myCustomFont2'] } }); \</script\>
Dr.
really? putting fonts in a sub folder is common web practise!
@font-face { font-family: "myfont"; src: url("/fonts/myfont.ttf"); }
Special for you
\<style type = "text/css"\> @font-face { font-family: "myCustomFont1"; src: url("fonts/myCustomFont1.ttf"); } @font-face { font-family: "myCustomFont2"; src: url("fonts/myCustomFont2.ttf"); } \</style\> \<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"\>\</script\> \<script\> WebFont.load({ custom: { families: ['myCustomFont1', 'myCustomFont2'] } }); \</script\>
It works perfect!
Implemented font loader. From build 3248 embedded .ttf fonts should work as usual
Hi,
Awesome! Just a note that on a non-debug build the console outputs:
font \<font-name\> loaded
Not sure if that is intended or not.
-dev
Hi,
Just another note, in debug mode, if no custom font is specified the console outputs:
not found, using sans-serif
-dev
Any chance of allowing for fonts in sub-directories to work again?
Added loading fonts from sub-folders and .otf font support
.otf font support ** **
Thanks!
That’s awesome thanks!
can someone please share a complete working index.html file
i’m still unable to get this working
i updated my index.html file (attached)
and i placed the ttf file in the same folder of the index.html file (attaching A.Jannat.LT.Bold.ttf was declined by corona website!)
Are you wanting the font to work inside your Corona app or on the page framework surrounding the Corona app?
If the answer is the Corona app, then you should be putting the font in the folder with main.lua (or a sub-folder in the project) like you would for any iOS, Android or desktop build. You don’t need to have it in the folder with the index.html or update your HTML/CSS to load the font.
Not all font files are created equally and I have no idea how well that font will work in the HTML5 version of Corona (or the iOS/Android version for that matter). If you can’t get it to work, you should assemble a test project that has your main.lua, build.settings, config.lua, font files and have the main.lua try to draw a simple display.newText() object on the screen.
Build it for HTML, install it to a web server, share the link to the web page to show it not working, then put the files in a .zip folder and share it with us. You should also try a few different custom fonts to determine if the problem is with the specific font file.
Rob
Hi Rob,
i want the font to work inside Corona app …
attached is my entire code (font working on simulator but on web it shows browsers default font)
the font is in Arabic by the way.