Adding custom fon to themet but different weights not showing and not font not showing in drop down

[simonp]

I have managed to add custom font to me theme - or at least areference to it - but unlike was existing I have two problems.

The font doesn’t display in the drop down

Also in the drop its not distingushing between the weights

Here is my fonts.json file

Has any one any ideas?

[JasonWang]

Hi @simonp Unfortunately, it’s limited to add custom fonts to Hubspot default font drop-down list

You will need to define the font for theme settings and use it or add by custom code

Add custom fonts to a theme - HubSpot docs

[Anton]

Hi @simonp,

since it’s about the theme-settings I wouldn’t work with the font option. Instead I’d use simple number options for all of your sizes (base size, desktop/h1, desktop/h2, mobile/h1, mobile/h2…). Or you can still use the font option but disable everything besides the font-size. The last and importatn stel: Set the font via CSS like

@font-face{
font-family: 'RajdhaniRegular', 
url: "PATH-TO-REGULAR-FONT", 
font-weight:400;
}

@font-face{
font-family: 'RajdhaniMedium', 
url: "PATH-TO-MEDIUM-FONT", 
font-weight:600;
}
...

body{
font-family: 'RajdhaniRegular', Arial, sans-serif;
font-weight:400;
}

h1,h2,h3,h4,h5,h6{
font-family: 'RajdhaniMedium', Arial, sans-serif;
font-weight:600;
}

h1{
font-size:{
{{theme.fonts.mobile.h1_size }} + "px";
}

@media screen and (min-width:1024px){
h1{
font-size:{
{{theme.fonts.desktop.h1_size }} + "px";
}
}

best,

Anton