such-a-wally Posted June 27 Share Posted June 27 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! 🙂 Link to comment
WidleStudioLLP Posted Friday at 01:18 PM Share Posted Friday at 01:18 PM 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'; } Widle Studio LLP info@widle.studio https://www.widle.studio Ahmedabad, India Link to comment
such-a-wally Posted Friday at 04:19 PM Author Share Posted Friday at 04:19 PM 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; } } Link to comment
tuanphan Posted Monday at 09:05 AM Share Posted Monday at 09:05 AM I see it already show fine on my end, you try checking it again. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
such-a-wally Posted Monday at 09:31 AM Author Share Posted Monday at 09:31 AM 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 🙂 Link to comment
WidleStudioLLP Posted Monday at 12:50 PM Share Posted Monday at 12:50 PM If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks Widle Studio LLP info@widle.studio https://www.widle.studio Ahmedabad, India Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment