Hi,
I’ve installed 321 Impact.ttf font from www.dafont.com but I cannot select it within Hype, I’ve loaded in the files into my resources folder as with other fonts and then added the Custom CSS Font with all the correct CSS Font-Family and Embedded Head HTML (I’ve just done a batch and this is the only one I’m having problems with). In the display window I can only see the default text ‘grumpy wizards…’ example, not 321 Impact font.
I try to select the font within ‘Typography’ and it won’t allow me to select it, the ‘grey box’ merely skips back to any previously selected font!
Before I just abandon this font and try something else can anyone help? I’ve downloaded it again and it works fine on my Mac Fonts using say Text Edit.
Thanks
Dan
Can you share a file with us?
HI Daniel,
certainly, attached is a zip file of the fonts and here is the code for the ‘Embedded Head HTML’ section of the Custom CSS Font dialogue box in Hype:
Archive.zip (304.4 KB)
This needs to be wrapped in <style> </style> tags.
It looks like the font family name is violating the CSS Font Family spec:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".
But Hype is not failing very gracefully here. Here's a version that works:
<style>
@font-face {
font-family: 'impactregular';
src: url('${resourcesFolderName}/321impact-webfont.eot');
src: url('${resourcesFolderName}/321impact-webfont.eot?#iefix') format('embedded-opentype'),
url('${resourcesFolderName}/321impact-webfont.woff2') format('woff2'),
url('${resourcesFolderName}/321impact-webfont.woff') format('woff'),
url('${resourcesFolderName}/321impact-webfont.ttf') format('truetype'),
url('${resourcesFolderName}/321impact-webfont.svg#321impactregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
A CSS Font Family name containing a number at the beginning will not be selectable in Hype (this might be a bug, or we're being strict about that spec), so I recommend removing those numbers in the Font Family area. Font files themselves don't seem to make a difference if they have or don't have numbers.
321impact.zip (330.1 KB)
1 Like
Hi Daniel,
that’s fantastic, works a treat, I had got the tags wrapping the body in the .css file, not quite sure how I managed to not copy them across and removing the numbers worked!
Will this allow me to include/embed the fonts as part of the app download (it’s going into PhoneGap), assuming I copy the files into the hype resources folder or does this require further steps?
Thanks
Dan
Yup! Just make sure it works on your devices you wish to support before submitting to the play/app store (and that you have a license for use).
1 Like
Perfect, yes, just bought a license! 
1 Like