Custom Font Family

Hey Guys,

I have to use a font family for a project. Importing a single font style is not a problem. But importing multiple styles gives me problems. If I make it like this, only one font is visible:

<style>

@font-face {
	font-family: 'CronosPro';
	src: url('${resourcesFolderName}/CronosPro-Bold.eot?#iefix') format('embedded-opentype'),
		url('${resourcesFolderName}/CronosPro-Bold.woff') format('woff'),
		url('${resourcesFolderName}/CronosPro-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'CronosPro';
	src: url('${resourcesFolderName}/CronosPro-Lt.eot?#iefix') format('embedded-opentype'),
		url('${resourcesFolderName}/CronosPro-Lt.woff') format('woff'),
		url('${resourcesFolderName}/CronosPro-Lt.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'CronosPro';
	src: url('${resourcesFolderName}/CronosPro-Subh.eot?#iefix') format('embedded-opentype'),
		url('${resourcesFolderName}/CronosPro-Subh.woff') format('woff'),
		url('${resourcesFolderName}/CronosPro-Subh.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CronosPro';
	src: url('${resourcesFolderName}/CronosPro-BoldSubh.eot?#iefix') format('embedded-opentype'),
		url('${resourcesFolderName}/CronosPro-BoldSubh.woff') format('woff'),
		url('${resourcesFolderName}/CronosPro-BoldSubh.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'CronosPro';
	src: url('${resourcesFolderName}/CronosPro-Regular.eot?#iefix') format('embedded-opentype'),
		url('${resourcesFolderName}/CronosPro-Regular.woff') format('woff'),
		url('${resourcesFolderName}/CronosPro-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
</style>

Importing the styles individually one after another will show them in in the font list, but I can not apply it to my text.

Any ideas? Thanks!

Since these are three separate fonts, you’ll need to add three separate custom fonts. I recommend adjusting the font-family for each:

When you select this ‘CronosBold’ font from the font chooser, it applies the Font-family property. If you use the same font-family property for all font variants, it will likely choose the last font in the order present in the exported HTML (the last in the Cascade).

Cool @Daniel thanks! – working like a charme! I think I was confused by the “font-family” property. Usually the variants “should” be budled under one family :slight_smile:

Cheers!

1 Like

Yeah, it’s nice when variants are all bundled together – this would let you define the font-family once, and then just set a weight (or bold / italic) for additional variants, which loads the variant from that single font file.

2 Likes

Ran into this too… as I am using Hype often as a widget in a page that already loads the fonts it is unfortunate that I can’t declare a font once and then choose it’s weight in Hype. Meaning I declare the SAME fonts used on the site (absolute URL’s, one font family, different weights) in Hype so I can preview and then I am missing the handler to choose 100-900,bold,normal,default in the interface. Well bold is technically there but… then surly something could be done with JS but… still unfortunate.

Or have I overlooked something?

I solved it with this workaround:

  1. Declare all font-faces in one font-family as requested above.
  2. In the locations I needed another font-weight I edited the text element (pen) and added a span with the needed CSS declaration.

Works! But would be great to have this selection in the interface.

Just wondering if the use of this would be useful or even possible - Variable Fonts

I saw it funny enough in this youtube video tonight…

The Variable Fonts is item 6 and starts at about: 28:49 / 1:12:16

2 Likes

Yes - and it fits with Hype's MO that this is something we'd add :smile:.

2 Likes