oinopo

I've built a website for a client : emeraldviewpomskies.com Neither the custom heading font or the body text font matches on the mobile version. Pasting the full CSS code I'm using below, it has some other stuff in it incase some of it is interfering with the font formatting. On desktop it works fine: // CUSTOM FONT @font-face { font-family: 'Supravitally'!important; src: url(https://static1.squarespace.com/static/66d4940e3f045a7a1e78be50/t/66d9901bed09bd5399a0b6e5/1725534235891/supravitally.regular.ttf); } @font-face { font-family: 'Albert Sans'!important; src: url(https://static1.squarespace.com/static/66d4940e3f045a7a1e78be50/t/66e1ac1b888bc404eb3a3dcb/1726065691394/AlbertSans-ExtraLight.ttf); } h1 { font-family: 'Supravitally'!important;} h2 { font-family: 'Supravitally'!important;} h3 { font-family: 'Supravitally'!important;} h4 { font-family: 'Supravitally'!important;} .sqsrte-large { font-family: 'Albert Sans'!important;} p { font-family: 'Albert Sans'!important;} .sqsrte-small { font-family: 'Albert Sans'!important;} #siteWrapper.site-wrapper .sqs-button-element--primary, #siteWrapper.site-wrapper .sqs-button-element--secondary, #siteWrapper.site-wrapper .sqs-button-element--tertiary{ font-family: Albert Sans !important; } //change case of list sections// .user-items-list-carousel .list-item-content__title { text-transform: none !important; font-family: "Supravitally"!important; } .user-items-list-carousel .list-item-content__description { text-transform: uppercase !important; } .vertical-line { background: #E1E5E5; width: 1px; height: 125px; margin: 0 auto; } //button-hover effect // .sqs-button-element--primary { border: 1px solid #d5eafb !important; color: #d5eafb !important; /* Text color before hover */ overflow: hidden !important; position: relative !important; background: transparent !important; transition: background 800ms cubic-bezier(0.19, 1, 0.22, 1), color 800ms cubic-bezier(0.19, 1, 0.22, 1) !important; } .sqs-button-element--primary span { z-index: 20 !important; } .sqs-button-element--primary:after { background: #d5eafb !important; content: "" !important; height: 155px !important; left: -75px !important; opacity: 0 !important; /* Start with opacity 0 */ position: absolute !important; top: -50px !important; transform: rotate(35deg) !important; transition: left 800ms cubic-bezier(0.19, 1, 0.22, 1), opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) !important; width: 50px !important; z-index: -10 !important; } .sqs-button-element--primary:hover { background: #B8CEC1 !important; /* Background color on hover */ color: #3e564d !important; /* Text color during hover */ opacity: 1 !important; /* Ensure full opacity on hover */ } .sqs-button-element--primary:hover:after { left: 120% !important; opacity: 1 !important; /* Ensure full opacity on hover */ } .sqs-button-element--primary:active { background: #B8CEC1 !important; /* Background color on active */ color: #3e564d !important; /* Text color when active */ opacity: 1 !important; /* Ensure full opacity for :after on active */ } .sqs-button-element--primary:active:after { opacity: 1 !important; /* Ensure full opacity for :after on active */ } html { scroll-behavior: smooth; } /* Accordion Hyperlink Underlines */ div.accordion-block a { border-bottom: 1px solid; color: #d5eafb !important; }

Hi, I'm messing around with adding custom fonts to my site. However my custom files dropdown inside Custom CSS looks like this: And no matter where I click inside of this dropdown menu, it always brings up my file explorer to upload a font. I can't scroll or grab the scroll bar, every pixel inside the dropdown leads me to upload. From my understanding, I need to reference the fonts in my code in order for it to work properly. In the builder at the moment, the fonts are working, but I assume they wouldn't if I was on a different device. Right now, I'm not able to fetch the url reference that is needed due to this.. bug? I've turned off my ad blocker since that sometimes messes with stuff, but it's the same. I'm not sure what to do here!