Hi Guys,
hopefully an easy question!
I have some fonts that I’ve used in my Hype3 project and they look all fine, I’m ready to export but in testing via my iPad (the intended device for my project) the fonts aren’t correct, it’s defaulting to another font and therefor the sizing is all over the place, a smilier issue happened when I created an eBook from the same project to see it working.
I’d be grateful for any help and please explain this as you would to a beginner, I’m not a total moron but not far off at time! 
Thanks
Dan
As a beginner, could you please share something so we can see what you're doing. Perhaps a scaled down version, URL, or something else as there could be many reasons for your problem and if we start explaining different scenarios and perhaps solutions it could get overwhelming and also confusing plus it would get to the point quicker rather than us trying to guess. 
Hi DBear,
no problem, it’s basically a book using some free fonts I’ve downloaded from the web, for some reason they are not showing on the ‘device preview’ as these fonts, my iPad is substituting them. Here is an image of the contents page, I’ve changed the font for the ‘page 2 line’ to see if it then works but from there below it’s the font which is not appearing.
It may be the fault of Hype Reflect as at the moment, I can only get it to ‘Mirror scene from Mac’, it doesn’t seem to want to preview the project, at the moment I can only correctly preview via the web browsers where all looks as it should, could this be it?
Can you share a .hype document as a zip file?
You may have seen this post, but it shows a walkthrough on how to use custom fonts:
@Daniel I think it’s just an iPad issue at least that’s what I get from the previous posts so I believe he has added the fonts in the correct manner. Also they are free fonts so has possibly used the drop downs in Hype to add them. That being said, if this is not the case @Backbone then by all means check out the link above that Daniel has posted to see if everything is correct. You will notice that by putting your font through an online resource to create a font package that it also creates an SVG version for you
and this is sometimes a problem when it comes to iPad rendering fonts is that it doesn’t do well with specific types so quite often you will include an SVG version in your fonts to counter this. Do you have an SVG version?
Hi DBear & Daniel,
I just downloaded the ttf files or whatever from the free online font page into my Mac fonts then added them via the ‘add new fonts’ option in the Hype Inspector, I seem to remember this being a little hit and miss at first with a couple of the fonts.
I don’t have an SVG version, never had to use one before so I’m guessing this is the way I should go somehow to solve this issue?
Thanks
Dan
Have a look at the article Daniel posted. And perhaps you can share the font that you are using, or the place where you got it? Rather than use your system for the fonts you can directly add them to your document in the resources. That way you can guarantee that they will be available when using your document. There are many posts her on using custom fonts (As well as the article) to help you.
1 Like
Hi DBear, (my Mac keeps trying to autocorrect to “Hi Dear”!)
that’s perfect, I have about 4 extra fonts from various sources but I’ll read through as you suggested and come back if all goes horribly wrong!
But here are a couple:
http://www.1001fonts.com/luckiest-guy-font.html
http://www.1001freefonts.com/a_little_pot.font
Thanks again
Dan
The best thing to see if your .hype document. A common issue with fonts is that they are added to the Mac and show up in a local preview, but the webfont CSS code was incorrectly entered so it is not properly used and won’t show up correctly on other devices.
1 Like
Hi
Which font types should I include in the output (as they can be quite large in file size), I have from font squirrel been given: eot, svg, ttf, woff & woff2.
Just wondering if I can slim down the resourced folder by only including the ones Hype and PhoneGap are likely to need.
Thanks
Dan
The chart under “Browser Support for Font Formats” says which formats are supported by which browser: https://www.w3schools.com/css/css3_fonts.asp
If you have a .woff and don’t need to support older IE, then this is the only format you appear to need.
Smashing, nice one, thanks, that’ll reduce sizes in my efforts to optimize!
Dan
Hi Daniel,
Hope all is going well?
I managed to finish building the book using less scenes (had each page as a separate scene originally, numbering 30+) by simply swapping in the repeating elements as and when I need them.
I also created separate HTML files for each chapter so they could load in separately to reduce the load on the device (testing on an iPad 3/4)
I linked each of the HTML Chapters to use the same (35MB) resources folder (although I might experiment by creating 2 but a lot of the elements are used in each chapter so I’m not sure if I’ll score any more performance points in the long run as it’ll only be a few image files that will not be needed)
I still am experiencing performance issues when exporting to PhoneGapBuid and testing the Hybrid app on my iPad, sometimes buttons won’t play associated short sounds or when playing an animated scene the first sound will be lost, when testing on my Mac in the browser it works perfectly, and much better in Hype Reflect also on the iPad.
Also, any ideas why it won’t display on my iPhone7 correctly? In Hype Reflect it only shows the top corner of the page (designed in 1024x768), I’ve tried playing with the ‘Document’ setting but can’t get it to display properly on loading or even let me zoom out or drag the page to see the whole page at the moment.
Apologies for the questions, I really hope you can help?
Best regards
Dan
If you need to convert a font to WOFF format, here’s a link to an online converter. WOFF format is OpenType or TrueType with compression and additional metadata.
2 Likes
A big thing that might help you here is turning preload to 'off' for your images. This might speed things up by reducing the memory requirements of your document.
An iPad Pro would likely display everything fine, but a slower/older iPad might struggle with a great deal of images.
Do you have any Responsive Layouts setup for your document? You should set those up and use this setting to make sure you can scale in and out (if that's what you want)
... but typically you want to just setup layouts so that the user doesn't need to do any pinching to zoom in or out.
Great, thanks again, I’ve turned off every pre-load so will give that a try.
As for Responsive Layouts, there isn’t one specifically for say iPhone 7 resolution which is 750x1334 but has a logical resolution of 375x667, I’m assuming this has more to do with why it’s only displaying a fraction of the screen image as it’s smaller than the 1024x768 that the project is set at, I would have thought that as a higher resolution device that it should display 1024x768 easily…weird.
I will create the iPhone one but I want to fix it to landscape display only so can I create a custom layout? I’ll investigate on my own of course a bit more from your link.
Thanks
Dan
Annoyingly, turning off pre-load for all the images (about a third had it deactivated on the previous build) has caused the performance to degrade even more it seems.
What iPad hardware are you testing on?
Hi,
It’s an iPad 4 16GB with 2.7GB free.
Thanks
Dan