Wrong font face displayed in Hype Reflect

Elements Typography
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

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.

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.

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.

5

I have an SVG that I created in Adobe Illustrator - I actually created outlines of the fonts, and they are still turning into Times when I view them on Hype Reflect on my iPad. This makes not a lot of sense - and it is fairly confusing. Any ideas?29%20PM

23%20PM
Screen Shot 2019-05-29 at 3.27.23 PM.png773×318 205 KB

The smaller screenshot is how it is looks in Hype the larger one is from my iPad.

6

This is related: Using a custom web font within an SVG file

Somewhere in your SVG file the custom font is being referenced and is not being found, but hard to tell without seeing the file.

You might be able to clean up your SVG file by dragging+dropping the file into Imageoptim or https://jakearchibald.github.io/svgomg/