such-a-wally

I think it might be fixed now! 🙂 I tried uploading a woff2 file instead of the ttf, otf and woff fonts I tried before and the woff2 one works! I'll check to see whether anyone else can still see the other font but it's fixed on my old windows laptop, so I'll take that as a good sign 🙂

Thanks for the reply! 🙂 Unfortunately that hasn't fixed it; it's working on my desktop but isn't showing on another device. Seems to show up on a windows desktop, iPhone and iPad, but isn't showing up on an older windows laptop? I've attached another picture to show what I mean, I'll also post all of the code I'm using in case that helps. I added some more selectors for the navigation menu but that didn't work, I don't think I need all of them: /* Navigation Bar Edits */ @font-face { font-family: 'Watermelon'; src: url('https://static1.squarespace.com/static/664601afe5fae513be361332/t/6671be5d4a974b3e0f800476/1718730333512/Watermelon-Regular.ttf'); } h1 { font-family: 'Watermelon'; } .header-nav-list, .header-menu-nav-item a, .header-nav-item > a, header-nav-item, .header-nav-item--folder { font-family: 'Watermelon' !important; } div.header-nav-item--active>a { color: #F25130 !important; } div.header-nav-item--active>a:hover { color: #FFBE9F !important; } .header-nav a:hover{ color:#B6ADA5 !important; } .header-nav-item a, { background-image: none !important; } .header .icon svg {fill: white !important} .header .icon:hover svg {fill: white !important} .tweak-global-animations-animation-type-flex .header-nav-item:not(.header-nav-item--folder) a::after, .tweak-global-animations-animation-type-flex .header-nav-folder-item a::after { display: none !important; } /* Gallery Spacing Edits */ .gallery-reel-item img { padding:10px; margin-left:10px; margin-top:0px; margin-bottom:0px; } .gallery-masonry, .gallery-strips, .gallery-grid, .gallery-reel { padding-top: 2vw !important; padding-bottom: 5vw !important } #page section:first-child { .gallery-masonry, .gallery-strips, .gallery-grid, .gallery-reel { padding-top: 0vw !important } } #page section:last-child { .gallery-masonry, .gallery-strips, .gallery-grid, .gallery-reel { padding-bottom: 10vw !important } } @media screen and (max-width:767px) { .gallery-reel { height: 50vh !important; } } /* Masonry one item on mobile (illustrations) */ @media screen and (max-width:767px) { .gallery-masonry-item-wrapper { height: auto !important; margin-bottom: 30px !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 0 !important; padding-right: 0 !important; } }

Hi there! I'm struggling to get the custom font I want to use on my navigation menu working. I copied a few codes from other forum posts but it doesn't work all of the time. On my PC the font is loading but on another it's showing another font. I want it to use a font called Watermelon and I'm using this code: h1, h2, h3, h4, h5{ font-family: 'Watermelon' !important; } .header-nav-item, .header-menu-nav-item a { font-family: 'Watermelon' !important; } Website: https://holly-hayward-art.squarespace.com/ Password: WEBSITE Really new to CSS so any help would be appreciated! 🙂