Changing the font in an accordion

Hi all,

I’ve used a custom font in an accordion, as well as added media queries to make the font smaller on tablet and mobile. It looks good in the preview, however now that the site is published neither the font or sizing is applied, even with !important added.

Anyone know what I’m doing wrong?

Here is my code

  /* PP Neue */
  @font-face {
    font-family: 'custom_64056';
    font-style: normal;
    font-weight: 700;
    src: url("/api/fonts/630109d3a909630029798c27/n7/otf?domain=my.readymag.com&md5=vnFNx-HR6RNRzfc-jde6hg") format('opentype');
  }
  
  /* open sans */
  @font-face {
    font-family: 'custom_66702';
    font-style: normal;
    font-weight: 300;
    src: url("/api/fonts/633aecaa3d53fb0013703d8b/n3/ttf?domain=my.readymag.com&md5=134K1HjXFlBuQn8oNaohIA") format('truetype');
  } 
  
  /* open sans bold */
  @font-face {
    font-family: 'custom_66702';
    font-style: normal;
    font-weight: 600;
    src: url("/api/fonts/633aecaa3d53fb0013703d8b/n3/ttf?domain=my.readymag.com&md5=134K1HjXFlBuQn8oNaohIA") format('truetype');
  } 
    
    strong {
      font-weight: 600;
    }

    /* accordion title text styles */
    .accordion-container p.accordion {
      font-family: 'custom_64056' !important;
      color: #014237;
      font-size: 36px !important;
      @media (max-width: 768px) {
        font-size: 30px !important;
      }
      @media (max-width: 450px) {
        font-size: 26px !important;
      }
    }

    /* accordion content text styles */
    .accordion-container .accordion-content p {
      font-family: 'custom_66702' !important;
      color: #014237;
      font-size: 15px !important;
      margin: 12px 0;
      line-height: 25px;
            @media (max-width: 768px) {
        font-size: 13px !important;
      }
      @media (max-width: 450px) {
        font-size: 10px !important;
      }
    }

Thanks in advance for any ideas!

Hi @willowskye happy to help as I wrote that code! Mind sharing all of the code widget’s contents with us please?

Thanks so much! Of course (ignore all the comments haha, it’s so my clients understand what they can update).

<!-- HTML FOR ACCORDION STRUCTURE -->

<div class="accordion-container">
  <p class="accordion" style="border-top: 1px solid #014237;">social media strategy</p>
  <div class="accordion-content">
    	<p>a top-notch social media strategy built collaboratively alongside you - the expert of your business! a social strategy is the single most foundational piece of your lasting success on any platform. this is perfect for brands who are confident in their brand identity and personality and are looking to level up on social. however, it’s also fundamental for new companies and up-and-coming brands who are preparing to launch their social presence for the first time. if you don’t have a social media strategy, you need one! and we can help you get there.
</p>
  </div>

  <p class="accordion">campaign development</p>
  <div class="accordion-content">
    <p>are you planning for the holiday season? dropping a new product during the summer? expanding your service offering? there are a million reasons to run a social media campaign. we love to work with companies to craft strategic and impactful organic social media campaigns that align with your overarching business goals. 
</p>
  </div>
  
  <p class="accordion">content planning + ideation</p>
  <div class="accordion-content">
    <p>are you running out of post ideas? do you feel like you are saying the same thing to your audience over and over? worried about what you are posting during critical calendar moments? you might be in a position where you need to hit refresh on your content strategy. we work with new and established businesses to strengthen their content strategy and plan out what to post. whether it’s a week’s worth of content or an entire quarter, we’ll take a look at formats, messaging, copy and more! 
</p>
  </div>

  <p class="accordion">profile optimizations</p>
  <div class="accordion-content">
    <p>when was the last time you took a hard look at your social profiles? to be honest - it probably wasn’t recently 👀 <p>
    <p>this service is perfect for brands that have a ‘set it and forget it mentality. we’ll take a deep dive into your profile to refresh the most important elements. sometimes this is a visual exercise (hello new profile pic!) and sometimes it means setting up auto-replies because you don’t have a team helping you manage those DMs. always unique to your business and the industry you operate in, profile optimizations are always beneficial. new biz owners, long-time entrepreneurs, e-commerce companies, independent contractors…come one come all. 
</p>
  </div>

  <p class="accordion">discovery session</p>
  <div class="accordion-content">
    <p>a discovery session is perfect for those in need of social media support that have no idea where to start. maybe you have an idea but need some help bringing it to life. or, you might be craving a new set of eyes on your social content. we’ll chat about where you are currently and also where you want to be in the future. afterwards, we’ll put together some recommendations unique to your situation and budget! 
</p>
<p>don’t see an offering listed above? shoot us a note and we can discuss your project's needs. we have a collective of talent that can help bring your idea to life. </p>
  </div>


</div>
  
<!-- CSS FOR ACCORDION STYLES -->

  <style>
    
  /* custom fonts */
  
  /* PP Neue */
  @font-face {
    font-family: 'custom_64056';
    font-style: normal;
    font-weight: 700;
    src: url("/api/fonts/630109d3a909630029798c27/n7/otf?domain=my.readymag.com&md5=vnFNx-HR6RNRzfc-jde6hg") format('opentype');
  }
  
  /* open sans */
  @font-face {
    font-family: 'custom_66702';
    font-style: normal;
    font-weight: 300;
    src: url("/api/fonts/633aecaa3d53fb0013703d8b/n3/ttf?domain=my.readymag.com&md5=134K1HjXFlBuQn8oNaohIA") format('truetype');
  } 
  
  /* open sans bold */
  @font-face {
    font-family: 'custom_66702';
    font-style: normal;
    font-weight: 600;
    src: url("/api/fonts/633aecaa3d53fb0013703d8b/n3/ttf?domain=my.readymag.com&md5=134K1HjXFlBuQn8oNaohIA") format('truetype');
  } 
    
    strong {
      font-weight: 600;
    }

    /* accordion title text styles */
    .accordion-container p.accordion {
      font-family: 'custom_64056' !important;
      color: #014237;
      font-size: 26px !important;
      @media (max-width: 768px) {
        font-size: 20px !important;
      }
      @media (max-width: 450px) {
        font-size: 16px !important;
      }
    }

    /* accordion content text styles */
    .accordion-container .accordion-content p {
      font-family: 'custom_66702' !important;
      color: #014237;
      font-size: 15px !important;
      margin: 12px 0;
      line-height: 25px;
            @media (max-width: 768px) {
        font-size: 13px !important;
      }
      @media (max-width: 450px) {
        font-size: 10px !important;
      }
    }

    /* accordion title styles */
    .accordion-container .accordion {
      cursor: pointer;
      padding: 15px 8px;
      margin: 0;
      font-weight: 300;
      color: #014237;
      transition: color 0.4s ease-out;
    }
   
    /* hover styles */
    .accordion-container .accordion:hover {
      color: #EA7194;
    }

    /* accordion icon box styles */
    .accordion-container .accordion::after {
      content: '✕';
      float: right;
      transform: rotate(-45deg);
      font-size: 20px;
      transition: .5s ease-out;
    }

    /* accordion icon box styles: opened  */
    .accordion-container .active::after {
      content: "✕";
      transform: rotate(0deg);
      font-size: 20px;
    }

    /* accordion content box styles: default */
    .accordion-container .accordion-content {
      padding: 0px 8px;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.5s ease-out;
      border-bottom: 1px solid #014237;
      background-color: #F1EBE0;
    }
    
    .indent {
      padding-left: 20px; 
    } 
    
  </style>

<!-- JAVASCRIPT FOR ACCORDION FUNCTIONALITY -->

<script>
  const accordionHeading = document.querySelectorAll(".accordion");
  const accordionContent = document.querySelectorAll(".accordion-content");

  for (let i = 0; i < accordionHeading.length; i++) {
    accordionHeading[i].onclick = function() {
      if (this.nextElementSibling.style.maxHeight) {
        hideContent();
      } else {
        showContent(this);
      }
    };
  }

  function showContent(elem) {
    hideContent();
    elem.classList.add("active");
    elem.nextElementSibling.style.maxHeight =
      elem.nextElementSibling.scrollHeight + "px";
  }

  function hideContent() {
    for (let i = 0; i < accordionContent.length; i++) {
      accordionContent[i].style.maxHeight = null;
      accordionHeading[i].classList.remove("active");
    }
  }

</script>

Hi @willowskye below I’ve included the update CSS. I’ve also removed some CSS that was being duplicated / not required.

I’ve left it with sizes for just mobile for you to try and see how it was done and do the same for another size!

/* custom fonts */
/* PP Neue */
@font-face {
  font-weight: 700;
  font-style: normal;
  font-family: 'custom_64056';
  src: url("/api/fonts/630109d3a909630029798c27/n7/otf?domain=my.readymag.com&md5=vnFNx-HR6RNRzfc-jde6hg") format('opentype');
}

/* open sans */
@font-face {
  font-weight: 300;
  font-style: normal;
  font-family: 'custom_66702';
  src: url("/api/fonts/633aecaa3d53fb0013703d8b/n3/ttf?domain=my.readymag.com&md5=134K1HjXFlBuQn8oNaohIA") format('truetype');
}

/* open sans bold */
@font-face {
  font-weight: 600;
  font-style: normal;
  font-family: 'custom_66702';
  src: url("/api/fonts/633aecaa3d53fb0013703d8b/n3/ttf?domain=my.readymag.com&md5=134K1HjXFlBuQn8oNaohIA") format('truetype');
}

strong {
  font-weight: 600;
}

/* accordion title text styles */
.accordion-container p {
  color: #014237;
  font-size: 26px !important;
  font-family: 'custom_64056' !important;
}

/* accordion content text styles */
.accordion-content p {
    margin: 12px 0;
  color: #014237;
  font-size: 15px;
  font-family: 'custom_66702' !important;
  line-height: 25px;
}

/* mobile sizes */
@media (max-width:760px) {
  /* accordion title text styles */
  .accordion-container p {
    font-size: 16px !important;
  }

/* accordion content text styles */
  .accordion-content p {
      margin: 12px 0;
    font-size: 10px;
  }
}

/* accordion title styles */
.accordion-container .accordion {
  margin: 0;
  padding: 15px 8px;
  color: #014237;
  font-weight: 300;
  cursor: pointer;
  transition: color 0.4s ease-out;
}

/* hover styles */
.accordion-container .accordion:hover {
  color: #EA7194;
}

/* accordion icon box styles */
.accordion-container .accordion::after {
  float: right;
  content: '✕';
  font-size: 20px;
  transition: .5s ease-out;
  transform: rotate(-45deg);
}

/* accordion icon box styles: opened  */
.accordion-container .active::after {
  transform: rotate(0deg);
}

/* accordion content box styles: default */
.accordion-container .accordion-content {
  overflow: hidden;
  padding: 0px 8px;
  max-height: 0;
  border-bottom: 1px solid #014237;
  background-color: #F1EBE0;
  transition: max-height 0.5s ease-out;
}

.indent {
  padding-left: 20px;
}

Hey, thanks so much! The resizing is working now :slight_smile: Unfortunately the custom font still isn’t working, it works on preview but not once published.

Hi @willowskye I suggest uploading that Woff file to somewhere else and using the URL from that.

Thank you. So for the one font it’s a Google font so I just used their link. For the custom font I updated the URL with the new domain, and it appeared to work once I published, but on other devices it’s still not working. I’m not sure where I’d upload it to use as a URL? I’ve always self hosted fonts.
Another slightly odd thing is that the paragraph text resizes as the browser window resizes, getting either tiny or quite large, despite having a font size with !important specified.

Hey! Quick update, I tried using a Google font for the heading font instead, but it’s still reverting to a fallback, and I can’t figure out why. I do have two accordions on the same page, not sure if they interfere with eachother?

Hey! Sorry to bug you, just wanted to check if you have any ideas? My clients are hoping to launch so I’m wondering if the drop down’s just aren’t going to work for them.
Thanks in advance for any info!

@neueMeta any chance you’re free? I’m O.O.O!