The documentation mentions that it’s possible, but I can’t seem to figure out how to make it work.
I have my link declaration to the stylesheet. The fonts I have are Archer SSm and Vitesse SSm.
I also included:
<style> @font-face { font-family: 'Archer SSm A', 'Archer SSm B'; } </style>
But when I choose Archer SSm as a font, it’s not working. What am I missing?
If your fonts are in the resources area then don’t forget to link as such
src: url('${resourcesFolderName}/blahblahblah.eot') format('embedded-opentype'), ......
link to typography in the documentation
http://tumult.com/hype/documentation/3.0/#typography
D
Are you still having issues with this @wbaccus?
Thanks for checking. I believe I have it figure out now.
Hi @wbaccus
Can you please tell me how you got it to work?
What seems to be the problem. Are you trying to add fonts from typography.com into Hype?
The font mentioned above I believe is a Screen Smart version which come from cloud.typography.com (this is not clear and I am only guessing here)
####If this is the case you would need to add to the Head HTML within Hype the following.
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/1234/font.css" />
Here “1234” I think is referring to a key you would get from your cloud.typography.com account when you choose your fonts.
You would then need to add:
<style>
body {
font-family: 'Archer SSm A', 'Archer SSm B';
font-weight: 200;
font-style: 'normal';
}
</style>
You can add any selector above. I have suggested “body” but you could do this for individual elements.
####If you have downloaded your fonts
you would need to add them to your resources folder and then follow the instructions in the documentation to add them to your project. Be careful that any “src” you need to add uses the special resources folder variable to point to your fonts e.g:
src: url('${resourcesFolderName}/.......') ...
#####Disclaimer: I haven’t tested this
Whath DBear said is exactly what I did.
Hi @DBear
The problem is as follows. I have added the code to the Head from typography.com and can see the typefaces within Hype locally. When I publish to the live site the typefaces aren’t picked up.
I have tried adding the body declaration with my chosen font (Gotham Book) as a test but that doesn’t seem to work.
The URL is bluefinchwealth.com/home-page
cheers
Jerome
In the URL you posted above I can see that you have added the code to the HEAD successfully however you have chosen the "p" selector to apply the rule. Hype doesn't natively have a "p" (paragraph) element so therefore you won't see the font unless you place a "p" element inside the innerHTML of one of Hype's elements (a rectangle, ellipse, text, etc).
I can see that you've added a p element inside one of the elements in the scene and this is showing the correct font. So, it is working but only for text contained within a p tag.
If you want the text in some elements to have this new font realised you could change the "p" selector to a class and then apply that class to whichever elements you want to have text as "Gotham SSm".
.gotham-text {
font-family: "Gotham SSm A", "Gotham SSm B";
font-style: normal;
font-weight: 400;
}
Hope that's clear enough for you.
I thought it was a little convoluted to add a class or tag to each element vial the html pop-up. Where do I find the panel with ID and Class etc?
One thing I did find that works is inserting “Gotham SSm A”, “Gotham SSm B” to the CSS family field when adding the the typeface via Custom CSS.
Ahh! I hadn’t looked in the info panel. Found it now, thanks for your help.
The method of adding with “Gotham SSm A”, “Gotham SSm B” just picked up the base weight 400, then that could be bolded which isn’t ideal. Specifying each weight is much better.
Hello - I’m confronting this same issue, and not having luck adding classes and assigning them in the identity panel for a text object. Setting the CSS-font-families in the Custom CSS dialog does result in successful display of the base weight font, but setting and applying the following classes in the identity panel doesn’t modify the font accordingly in situ:
<style media="screen" type="text/css">
.vitesse-book {
font-family: "Vitesse A", "Vitesse B";
font-style: normal;
font-weight: 400;
}
.vitesse-bold {
font-family: "Vitesse A", "Vitesse B";
font-style: normal;
font-weight: 700;
}
</style>
Note, these weights and styles are available in the font family. I have, of course, included the typography.com key:
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/xxxxx/yyyyy/css/fonts.css" />
Can you folks help me figure out what I’m doing wrong?
Thanks!
Hype adds the those properties as inline CSS, so if you are using rules from a <style> tag you’ll need to add !important after the font-family and font-weight in order for that style to override.
<style media="screen" type="text/css">
.vitesse-book {
font-family: "Vitesse A", "Vitesse B" !important;
font-style: normal !important;
font-weight: 400 !important;
}
.vitesse-bold {
font-family: "Vitesse A", "Vitesse B" !important;
font-style: normal !important;
font-weight: 700 !important;
}
</style>
If the weights themselves were exposed as different font-family names (maybe that’s what A and B are?) then you could add them separately as Custom CSS fonts within Hype’s Add More Fonts… panel and use them like any other font. Otherwise this is the best that can be done. (I’d like to improve how Hype deals with weights in the future…)
Thanks much for the reply and explanation! Works fine. No doubt dealing with every possible font publishing workflow isn’t trivial, and having Monotype built in is great. In our case, we have a pretty strong technical team that can handle setting up good working documents for our artists. No doubt, deeper font management will improve the experience!
Incidentally, we speculate A and B are parallel CDN distributions for failover purposes.
Thanks again!