Problem with custom font

Elements Typography
1

bonjour !

I’m Frank from France

(sorry for my bad english)

I got a big problem with a short deadline. my client need a custom font called ‘GOTHAM’ in a hype document

he own the rights to use it

so he send me the code below :

<link rel="stylesheet" type="text/css" href="//cloud.typography.com/6247692/752844/css/fonts.css" />
<style>
    .gotham-font-stack {
        font-family: "Gotham SSm A", "Gotham SSm B", Verdana, sans-serif;
    }
 
    .gotham-narrow-font-stack {
        font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Verdana, sans-serif;
    }
 
    .gotham-alt-font-stack {
        font-family: "Gotham A", "Gotham B", Verdana, sans-serif;
    }
</style>

i put this code in the ‘custom CSS’ option in the ‘add font’ menu. it works, the font appears in the font list, but the font is different in the client browser, and it’s a cursive one ! so my work is a mess ! and his site must be online asap !!

I need your help hype specialists !!

someone here could give me a working procedure ?

it would be really appreciate !

thank you on advance

have a good day…


frank-edouard wozniak

2

you need the converted font, too.
also the -webfont.eot, -webfont.ttf, -webfont.woff.
put all together with the css into the resource-library and you´re done.
i tried to convert gotham with font-squirrel, but it was forbidden.
how do your client got this font?

3

It's a premium font @strmiska

@few as strmiska has said above. You need the actual fonts then you can add them to your resource folder and then create custom CSS to add them to your project.

Also, as there is no protocol (fine if you are not viewing on a local machine) the fonts will not display. You have to either add http:// before it or add localhost to an approved list of domains at typography.com (as this font is a premium one then I'm guessing this won't work as per the comment from strmiska above "but it was forbidden")

4

merci messieurs !!

i asked my client to send me the original font (that he bought)… eventually i will need you support with the received files to put everything up !

merci beaucoup !!

frank-edouard wozniak

5

here is the font folder (GOTHAM OFFICE)

it’s a TTF family

How can i make my hype file to work ?

please give me a solution the deadline is tomorrow !

merci !!

frank

6

This is what you need to put after clicking Add More Fonts… -> Custom CSS

Hype 3 Hype 3, Today at 17.14.33.png832×525 56.7 KB

Code here for easy copy paste :wink:

<style>
@font-face {
	font-family: 'GothamOffice-Bold';
	src: url('${resourcesFolderName}/GothamOffice-Bold.ttf');
}
</style>

Others just add same way with different filenames

i.e Gotham Bold Italic

src: url('${resourcesFolderName}/GothamOffice-BoldItalic.ttf');

After you’ve added them all following these steps they will appear in your resources folder and will be available to select within Hype.

Example document after completion

gothamFont.hype.zip (226.5 KB)

Also, @few I would remove the .zip file of the font above as people could use it and it’s perhaps unfair for the person who bought it :wink:

2 Likes
7

works like a charm DBear !

thank you very much !!

i’ll send it to my client tomorrow !

you save a 2 months work !!

merci beaucoup !!


f e w
frank-edouard wozniak

1 Like