How to edit custom CSS fonts?

Hello,
Is here any way how to edit custom added fonts?
In “Resources” tab when I click on the custom font there is no option to change font.

Must I delete font and add changed font again to make changes?

Regards,
Matus

Unfortunately you do need to delete custom fonts and re-add them. Definitely on our radar to improve!

Hi Jonathan,

Im having problems, I cannot switch between the different CSS font variants I’ve imported. I have 100, 400,500,700 and 900 variants please tell what am I doing wrong here? The Beta nor the Current version doesn’t let me choose between the different variants. It does however lets me use one font variant at a time - meaning i have to remove all but one to use a specific one.

TestFont.hype.zip (12.3 KB)

Select your Brandon 100 font, click ‘Edit font’ at the bottom of the resource library, and change your line:

font-weight:100;

to:

font-weight:100 !important;

Typekit is built to require only a small snippet of code in the <head> (the embed code which references their .js file). And then you can just use the following code which references the loaded font files:

 <style>
 @font-face {
  font-family:brandon-grotesque;
  font-weight:900 !important;
  font-style:normal;
 }
</style>

This is based on your ‘kit’ which can contain any variety of fonts and their weights.

I did what you asked me to but didn’t work. When selecting it only defaults to one font ‘thin’ however when editing the fonts shows the preview of the specific weights with no problems.

Please take a look at updated hype doc, see if you can figure out why its not working.
BTW, Im using one of our affiliate jaycassario.com site type kit source code and css selectors for the brandon-grotesque fonts that his site uses.

TestFont.hype.zip (14.6 KB)

The issue is that the font-family property inside the @font-face is not set correctly/named uniquely. You need this to also specify the corresponding weight. You seem to “use” it in the Hype CSS Font-Family field though.

You have:

<style>
@font-face {
 font-family:brandon-grotesque;

You should have something like:

<style>
@font-face {
 font-family:brandon-grotesque-n5;

This gives the declared @font-face a unique name that can then correspond to the width.

2 Likes

Perfect, Worked like a charm. Never occurred to me that is where I would define the font variant. I’ve always thought it was at the very top “CSS Font-Family” and the fact that majority of the users here suggested that is the place to have it. Looks like Adobe Help site did actually point for IE8?.

1 Like