Wrong font face displayed in Hype Reflect


(Melina Kiefer) #1

Hello there!

I have some problems with my fonts. I added them as it is explained in the Hype Documentation and for opening it with the Browser on my Mac it’s working well. But when I try to open it on my iPhone or iPad via Hype Reflect, it just shows times which makes it pretty complicated to adjust the Typography.
I embedded the fonts in the HTML file like this:

@font-face {
  font-family: 'AkkuratPro-Regular';
  src: url('AkkuratPro-Regular.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AkkuratPro-Regular';
  src:  url('${resourcesFolderName}/AkkuratPro-Regular.otf')  format('opentype'),
	url('${resourcesFolderName}/AkkuratPro-Regular.otf') format('woff'),
	url('${resourcesFolderName}/AkkuratPro-Regular.ttf')  format('truetype'),
	url('${resourcesFolderName}/AkkuratPro-Regular.svg#AkkuratPro-Regular') format('svg');
  
  font-weight: normal;
  font-style: normal;
}
</style>


	<style>

@font-face {
  font-family: 'AkkuratPro-Bold';
  src: url('AkkuratPro-Bold.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AkkuratPro-Bold';
  src:  url('${resourcesFolderName}/AkkuratPro-Bold.otf')  format('opentype'),
	url('${resourcesFolderName}/AkkuratPro-Bold.otf') format('woff'),
	url('${resourcesFolderName}/AkkuratPro-Bold.otf')  format('truetype'),
	url('${resourcesFolderName}/AkkuratPro-Bold.svg#AkkuratPro-Bold')
	format('svg');

  font-weight: normal;
  font-style: normal;
}
</style>

	<style>

@font-face {
  font-family: 'GTPressura-Bold';
  src: url('GTPressura-Bold.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GTPressura-Bold';
  src:  url('${resourcesFolderName}/GTPressura-Bold.otf')  format('opentype'),
	url('${resourcesFolderName}/GTPressura-Bold.otf‘) format('woff'),
	url('${resourcesFolderName}/GTPressura-Bold.ttf')  format('truetype'), 
	url('${resourcesFolderName}/GTPressura-Bold.svg#GTPressura-Bold') format('svg');

  font-weight: normal;
  font-style: normal;
}

</style>

	<style>

@font-face {
  font-family: 'InfoTextPro-Semibold';
  src: url('InfoTextPro-Semibold.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'InfoTextPro-Semibold';
  src:  url('${resourcesFolderName}/InfoTextPro-Semibold.otf')  format('opentype'),
	url('${resourcesFolderName}/InfoTextPro-Semibold.otf‘) format('woff'),
	url('${resourcesFolderName}/InfoTextPro-Semibold.ttf')  format('truetype'),
	url('${resourcesFolderName}/InfoTextPro-Semibold.svg#InfoTextPro-Semibold') format('svg');
 
  font-weight: normal;
  font-style: normal;
}
</style>

Maybe someone can tell me what to change to make the fonts work on any devices!
Thanks a lot


(Jonathan Deutsch) #2

Do you mind attaching a zip of the .hype document? It isn’t clear what the interaction between the code and the document will be. The only thing that looks wrong are these line:

	url('${resourcesFolderName}/GTPressura-Bold.otf‘) format('woff'),
	url('${resourcesFolderName}/InfoTextPro-Semibold.otf‘) format('woff'),

The quote mark next to otf is a left quote () but should just be a single tick ('). But the first two fonts don’t have this issue.


(Melina Kiefer) #3

I tried to upload a zip but somehow it is not working. It is uploading, but as soon as it reaches 100% percent it just disappears…
The other problem is that I can’t change the lines… the code is grey and I can copy it but not change it.


(Jonathan Deutsch) #4

If you’re doing this through Hype’s font system, then you would want to go to the Resource Library, select the font, and then hit Edit Font….

You’re welcome to post a dropbox share link or email support@tumult.com with the document.