I'm using devTools' coverage tool to check which non-essential files are being loaded and slowing down my site. I see that the font files used by Relume (Inter and Roboto) are showing up on all my pages, but they're not actually being used. I've been looking all over the site to try and find out why these files are being loaded in but I haven't had any luck. ChatGPT says the fonts must be in use for these files to load, but they say 100% not used in Coverage... Any idea @Matt?
@Emily Marais they must have been imported via the style guide builder import though yeah? If so, then they would be located under the global styles > fonts embed.
ohhhh I checked in global styles but didn't see there were multiple code embeds! Thank you so much 🙂
Hi Matt, just checked and the projects I'm working on only have one code embed
<style><br /><br />/* Set slider styles */<br />.w-slider-dot {<br />background: ##E7CBB0;<br />}<br />.w-slider-dot.w-active {<br />background: ##A07143;<br />}<br /><br />/* Set color style to inherit */<br />.inherit-color * {<br /> color: inherit;<br />}<br /><br />/* Focus state style for keyboard navigation for the focusable elements */<br />*[tabindex]:focus-visible,<br /> input[type="file"]:focus-visible {<br /> outline: 0.125rem solid ##4D65FF;<br /> outline-offset: 0.125rem;<br />}<br /><br />/* Get rid of top margin on first element in any rich text element */<br />.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {<br /> margin-top: 0 !important;<br />}<br /><br />/* Get rid of bottom margin on last element in any rich text element */<br />.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {<br /> margin-bottom: 0 !important;<br />}<br /><br />/* Prevent all click and hover interaction with an element */<br />.pointer-events-off {<br /> pointer-events: none;<br />}<br /><br />/* Enables all click and hover interaction with an element */<br />.pointer-events-on {<br /> pointer-events: auto;<br />}<br /><br />/* Create a class of .div-square which maintains a 1:1 dimension of a div */<br />.div-square::after {<br /> content: "";<br /> display: block;<br /> padding-bottom: 100%;<br />}<br /><br />/* Make sure containers never lose their center alignment */<br />.container-medium,.container-small, .container-large {<br /> margin-right: auto !important;<br /> margin-left: auto !important;<br />}<br /><br />/*<br />Make the following elements inherit typography styles from the parent and not have hardcoded values.<br />Important: You will not be able to style for example "All Links" in Designer with this CSS applied.<br />Uncomment this CSS to use it in the project. Leave this message for future hand-off.<br />*/<br />/*<br />a,<br />.w-input,<br />.w-select,<br />.w-tab-link,<br />.w-nav-link,<br />.w-dropdown-btn,<br />.w-dropdown-toggle,<br />.w-dropdown-link {<br /> color: inherit;<br /> text-decoration: inherit;<br /> font-size: inherit;<br />}<br />*/<br /><br />/* Apply "..." after 3 lines of text */<br />.text-style-3lines {<br /> display: -webkit-box;<br /> overflow: hidden;<br /> -webkit-line-clamp: 3;<br /> -webkit-box-orient: vertical;<br />}<br /><br />/* Apply "..." after 2 lines of text */<br />.text-style-2lines {<br /> display: -webkit-box;<br /> overflow: hidden;<br /> -webkit-line-clamp: 2;<br /> -webkit-box-orient: vertical;<br />}<br /><br />/* Adds inline flex display */<br />.display-inlineflex {<br /> display: inline-flex;<br />}<br /><br />/* These classes are never overwritten */<br />.hide {<br /> display: none !important;<br />}<br /><br />@media screen and (max-width: 991px) {<br /> .hide, .hide-tablet {<br /> display: none !important;<br /> }<br />}<br /> @media screen and (max-width: 767px) {<br /> .hide-mobile-landscape{<br /> display: none !important;<br /> }<br />}<br /> @media screen and (max-width: 479px) {<br /> .hide-mobile{<br /> display: none !important;<br /> }<br />}<br /><br />.margin-0 {<br /> margin: 0rem !important;<br />}<br /><br />.padding-0 {<br /> padding: 0rem !important;<br />}<br /><br />.spacing-clean {<br />padding: 0rem !important;<br />margin: 0rem !important;<br />}<br /><br />.margin-top {<br /> margin-right: 0rem !important;<br /> margin-bottom: 0rem !important;<br /> margin-left: 0rem !important;<br />}<br /><br />.padding-top {<br /> padding-right: 0rem !important;<br /> padding-bottom: 0rem !important;<br /> padding-left: 0rem !important;<br />}<br /><br />.margin-right {<br /> margin-top: 0rem !important;<br /> margin-bottom: 0rem !important;<br /> margin-left: 0rem !important;<br />}<br /><br />.padding-right {<br /> padding-top: 0rem !important;<br /> padding-bottom: 0rem !important;<br /> padding-left: 0rem !important;<br />}<br /><br />.margin-bottom {<br /> margin-top: 0rem !important;<br /> margin-right: 0rem !important;<br /> margin-left: 0rem !important;<br />}<br /><br />.padding-bottom {<br /> padding-top: 0rem !important;<br /> padding-right: 0rem !important;<br /> padding-left: 0rem !important;<br />}<br /><br />.margin-left {<br /> margin-top: 0rem !important;<br /> margin-right: 0rem !important;<br /> margin-bottom: 0rem !important;<br />}<br /><br />.padding-left {<br /> padding-top: 0rem !important;<br /> padding-right: 0rem !important;<br /> padding-bottom: 0rem !important;<br />}<br /><br />.margin-horizontal {<br /> margin-top: 0rem !important;<br /> margin-bottom: 0rem !important;<br />}<br /><br />.padding-horizontal {<br /> padding-top: 0rem !important;<br /> padding-bottom: 0rem !important;<br />}<br /><br />.margin-vertical {<br /> margin-right: 0rem !important;<br /> margin-left: 0rem !important;<br />}<br /><br />.padding-vertical {<br /> padding-right: 0rem !important;<br /> padding-left: 0rem !important;<br />}<br /><br />/* Apply "..." at 100% width */<br />.truncate-width {<br /> width: 100%;<br /> white-space: nowrap;<br /> overflow: hidden;<br /> text-overflow: ellipsis;<br />}<br />/* Removes native scrollbar */<br />.no-scrollbar {<br /> -ms-overflow-style: none;<br /> overflow: -moz-scrollbars-none;<br />}<br /><br />.no-scrollbar::-webkit-scrollbar {<br /> display: none;<br />}<br /><br /></style>
I actually don't have site admin access, so i can only provide the live site https://www.pardonmyfr.com/
so was the style guide exported to this site using our webflow app or is this an older project?
https://preview.webflow.com/preview/vumba?utm_medium=preview_link&utm_source=designer&[…]a&preview=bb03f6fe414206ea420a317ebcf4add2&workflow=preview
Here's a read-only for another project built last year that has the same font files showing up in Inspector
@Emily Marais hmm when I run the coverage report, I only see the fonts you have on the site - Lato and Cormorant Garamond.
the thing is with those two fonts - Roboto and Inter - they are typically "default" fonts - so I was looking around the style guide or for a second global styles embed that might have something but not finding any traces of those fonts and I ran the same report and still not finding them.
Hmm maybe they are cached, although I checked on incognito and still saw them. Anyway, it's not a big issue - if it were a quick fix I would like to remove them but no worries.
yeah also notice how those 3 dont have the full URL like that one in the middle? thats a bit odd too. Pretty annoying thing but feels like its something on the webflow side and less likely that its something being referenced in a hidden way.
