Hi all. I followed this tutorial Add custom fonts to a theme - HubSpot docs.
And I can see and select the font and all the weight options when editing a module but the page doesnt reflect the selected weights properly.
This my font.json
{
“name”: “Urbane”,
“default”: “Regular”,
“fallback”: “arial, san-serif”,
“variants”: [
{
“name”: “Heavy”,
“files”: [
{
“file”: “./urbane_heavy-webfont.woff2”,
“format”: “woff2”
},
{
“file”: “./urbane_heavy-webfont.woff”,
“format”: “woff”
}
],
“styles”: {
“font-weight”: 900
}
},
{
“name”: “Heavy Italic”,
“files”: [
{
“file”: “./urbane_heavy_italic-webfont.woff2”,
“format”: “woff2”
},
{
“file”: “./urbane_heavy_italic-webfont.woff”,
“format”: “woff”
}
],
“styles”: {
“font-weight”: 900, “font-style”: “italic”
}
},
{
“name”: “Bold”,
“files”: [
{
“file”: “./urbane_bold-webfont.woff2”,
“format”: “woff2”
},
{
“file”: “./urbane_bold-webfont.woff”,
“format”: “woff”
}
],
“styles”: {
“font-weight”: “bold”
}
},
{
“name”: “Bold Italic”,
“files”: [
{
“file”: “./urbane_bold_italic-webfont.woff2”,
“format”: “woff2”
},
{
“file”: “./urbane_bold_italic-webfont.woff”,
“format”: “woff”
}
],
“styles”: {
“font-weight”: “bold”, “font-style”: “italic”
}
},
{
“name”:“Demi Bold”,
“files”: [
{
“file”:“./urbane_demi_bold-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_demi_bold-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-weight”:“600”
}
},
{
“name”:“Demi Bold Italic”,
“files”: [
{
“file”:“./urbane_demi_bold_italic-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_demi_bold_italic-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-weight”:“600”,“font-style”:“italic”
}
},
{
“name”: “Regular”,
“files”: [
{
“file”: “./urbane_medium-webfont.woff2”,
“format”: “woff2”
},
{
“file”: “./urbane_medium-webfont.woff”,
“format”: “woff”
}
],
“styles”: {
“font-weight”: 400
}
},
{
“name”:“Italic”,
“files”: [
{
“file”:“./urbane_medium-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_medium-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-style”:“italic”
}
},
{
“name”:“Light”,
“files”: [
{
“file”:“./urbane_light-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_light-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-weight”:“300”
}
},
{
“name”:“Light Italic”,
“files”: [
{
“file”:“./urbane_light_italic-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_light_italic-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-weight”:“300”,“font-style”:“italic”
}
},
{
“name”:“Extra Light”,
“files”: [
{
“file”:“./urbane_extra_light-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_extra_light-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-weight”:“200”
}
},
{
“name”:“Extra Light Italic”,
“files”:[
{
“file”:“./urbane_extra_light_italic-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_extra_light_italic-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-weight”:“200”,“font-style”:“italic”
}
},
{
“name”:“Thin”,
“files”:[
{
“file”:“./urbane_thin-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_thin-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-weight”:“100”
}
},
{
“name”:“Thin Italic”,
“files”:[
{
“file”:“./urbane_thin_italic-webfont.woff2”,
“format”:“woff2”
},
{
“file”:“./urbane_thin_italic-webfont.woff”,
“format”:“woff”
}
],
“styles”:{
“font-weight”:“100”,“font-style”:“italic”
}
}
]
}
#########################
Here is my theme.json
{
“label” : “MojoFlex-Master LIG HC Child”,
“fonts”: {
“label” : “Urbane”,
“custom_fonts”: [ “./fonts/Urbane”]
},
“preview_path” : “./templates/home-opt1-static-feature.html”,
“screenshot_path” : “./images/template-previews/home-opt1-static-feature.jpg”,
“enable_domain_stylesheets” : false,
“is_available_for_new_content” : true,
“extends” : “@marketplace/Mojo_Media_Labs/MojoFlex-Master”,
“version” : “1.0”,
“author” : {
“name” : “”,
“email” : “”
}
}
#############################
and here is the directory of files…
What am I missing?
Any help is greatly appreciated!!
