Custom Font Family


#1

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!


#2

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).


#3

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!


#4

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.


#5

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?


#6

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.


(Mark Hunte) #7

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


(Jonathan Deutsch) #8

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