Add font to font dropdown menu from custom @fontface code

[gillytech]

I have some custom css embed code from monotype fonts. They don’t allow downloading font files so I must embed the code on the site. However, I want these fonts to show up on the system font dropdown so I can assign it to a template on the site. It’s supremely annoying trying to figure this out on my own. I seem to be getting hung up not knowing how to register the fonts properly so they can be recognized by the system. Look at this code from the Dev Toolkit > Font Config:

{
  "googleSubsets": [],
  "typekitKitID": "",
  "typekitItems": [],
  "customFontItems": [
    {
      "family": "PF Marlet Display",
      "stack": "\"pf-marlet-display\"",
      "files": [
        {
          "id": 14,
          "url": "https://veliciae.com/wp-content/uploads/    PFMarletDisplay-Medium.woff2",
          "filename": "PFMarletDisplay-Medium.woff2",
          "mime": "font/woff2",
          "weight": "500",
          "style": "regular"
        },
        {
          "id": 15,
          "url": "https://veliciae.com/wp-content/uploads/    PFMarletDisplay-Medium.woff",
          "filename": "PFMarletDisplay-Medium.woff",
          "mime": "font/woff",
          "weight": "500",
          "style": "regular"
        }
      ],
      "_id": "6691b1f10b5f7"
    }
  ],
  "customFontFaceCSS": "",
  "fontDisplay": "auto"
}

I think something is supposed to go in “customFontFaceCSS” but I don’t know exactly how to implement this. Any ideas?

[christian]

Hey Kevin,

You’d need to change the value of theurl, filename and mime keys of the font to that of the hosted font from your provider (monotype). See my exmaple below.

Please ask you provider to give you the font URL.

You can usually get the URL from the href of the embed code.

I’ve tested that in my site and it works.

If it still doesn’t work and you’d like us to set this up for you, you can sign up to our One Total Care service where we provide implementation help.

Thanks.