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.
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>
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!
Hi Willow, what is the URL for that font? I think as it’s in an iFrame it won’t like that URL you have defined for it. Will need the full URL in front of it. If possible can you share the project privately in a message with us?
Hi all, please could someone explain how to change the font type for the menu title and menu contents in an accordion? I have tried to change but for some reason it does not appear when I publish. Thanks in advance
<p class="accordion" style="border-top: 1px solid #999;">What is the impact?</p>
<div class="accordion-content">
<p>
We tackle:
<br />
<ol>
<li><b>The lack of a uniform, standardized ESG strategy in the UK’s Build to Rent (BTR) housing sector.</b></li>
<p>
<li><b>Nomadic living contributes to one third of first time buyers and renters sending their unwanted goods to landfill.</b></li>
<p>
We are well-positioned to cater both to increasingly transient lifestyles and maintain ESG responsibility for BTR developments
</p>
</div>
<p class="accordion">Are all products responsibly produced?</p>
<div class="accordion-content">
<p>
Yes – we only work with sustainable products produced under fair conditions.
</p>
<br />
</div>
<p class="accordion">Why is the eco pledge a precondition to purchases?</p>
<div class="accordion-content">
<p>
The message doesn't just reach our screens - it goes beyond the e-purchase point
<br />
</p>
<br />
</div>
<style>
/* accordion title text styles */
.accordion-container p.accordion {
font-family: "Roboto-Condensed";
font-size: 12px;
}
/* accordion content text styles */
.accordion-container .accordion-content p {
font-family: "Roboto-Condensed";
font-size: 12px;
}
/* accordion content link styles */
.accordion-container .accordion-content a {
font-family: "Roboto-Condensed";
font-size: 12px;
font-style: ;
}
/* accordion title styles */
.accordion-container .accordion {
cursor: pointer;
padding: 15px 8px;
margin: 0;
font-weight: 300;
}
/* accordion icon box styles */
.accordion-container .accordion::after {
content: '✕';
float: right;
transform: rotate(-45deg);
font-size: 11px;
transition: .2s ease-out;
}
/* accordion icon box styles: opened */
.accordion-container .active::after {
content: "✕";
transform: rotate(0deg);
font-size: 11px;
}
/* accordion content box styles: default */
.accordion-container .accordion-content {
padding: 0 8px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
border-bottom: 1px solid #999;
}
</style>
</div>
<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>`
```
Unfortunately the custom font still isn’t working, it works on preview but not once published.