Custom Font Not Working on Navigation Menu

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! 🙂

Download Watermelon fonts into your PC and follow these steps :

• Navigate to Custom CSS:

  • Go to Pages > Website Tools > Custom CSS.
  • Click on the arrow icon to add or drag your fonts.

• Upload and Add Font to Custom CSS:

       @font-face { font-family: 'Watermelon'; src: url('FONT URL'); }

       Replace 'FONT URL' with the actual URL of your uploaded font file.

  • After loading your fonts, add the following code to your Custom CSS
     

• Use the Font for Selectors:

  • Apply the font to any CSS selectors with the following code:
    h1 { font-family: 'Watermelon'; }

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;
}
}

I see it already show fine on my end, you try checking it again.

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 🙂

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks