Menu icon Foundation
How to add typekit fonts with foundation 5

Hi,

How to add Proxima Nova font family with foundation 5 typography.

typekitcustom font

Hi,

How to add Proxima Nova font family with foundation 5 typography.

Alexander Assimidis over 5 years ago

Inser your Font folder change your scss body font family and put it in your header.

Saravana Kumar over 5 years ago

Hi, Can you describe little bit more. can you share a example folder and file structure?

Lynda Spangler over 5 years ago

If you are using Typekit to serve the webfonts there is no font folder for you to insert the font into.

To add TypeKit to your site first add your Typekit Kit into your site. I stick this code in my site's template in the <head> so it is across all of my pages.

<script src="//use.typekit.net/[kit-id-from-typekit].js"></script>
<script>try{Typekit.load();}catch(e){}</script>

If you are using SCSS you would change this line:

$header-font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

and/or

$paragraph-font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

If you are using vanilla CSS you add the font to the font family in your code:

font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

Here is more information on adding TypeKit to your site.

Saravana Kumar over 5 years ago

Hi, Thanks a lot. Its working good :)