Jump to content

Custom Fonts

Recommended Posts

Site URL: http://parsnip-mustard-kmc7.squarespace.com

I had added custom fonts to my site title and headers. They were working just fine. I wanted to add a form for my email marketing from Flodesk. I followed the instructions to inject the header code and then add a code block and add the inline code to add the form where I wanted it on my page. The form works. BUT now all my custom fonts do not. Am I missing something? Do I now need to do something else to make my fonts work again?

Link to comment
  • Replies 2
  • Views 433
  • Created
  • Last Reply

I put this code into the code injection header section under advanced:

  (function(w, d, t, s, n) {
    w.FlodeskObject = n;
    var fn = function() {
      (w[n].q = w[n].q || []).push(arguments);
    w[n] = w[n] || fn;
    var f = d.getElementsByTagName(t)[0];
    var e = d.createElement(t);
    var h = '?v=' + new Date().getTime();
    e.async = true;
    e.src = s + h;
    f.parentNode.insertBefore(e, f);
  })(window, document, 'script', 'https://assets.flodesk.com/universal.js', 'fd');


This is the inline code I added to the home page and blog sidebar: 

<div id="fd-form-5ed8f210b9c153002b5ad9a4"></div>
  window.fd('form', {
    formId: '5ed8f210b9c153002b5ad9a4',
    containerEl: '#fd-form-5ed8f210b9c153002b5ad9a4'


The custom CCS  for the fonts (that were working) is: 

 font-family: 'thestylededit';
 src:local('thestylededit'), url(https://static1.squarespace.com/static/5ec06a46dc6caa06d366b1fd/t/5ec06aae9974cb409fe77637/1589668527982/TheStyledEdit.otf);
/* Desktop */
div#site-title-wrapper h1#site-title a{
    font-family: thestylededit;
/* mobile */
nav#mobile-navigation span#mobile-navigation-title a{
    font-family: thestylededit;
h1 {font-family: 'thestylededit' !important; }

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.