Jump to content

How to add my custom font to the navigation menu

Recommended Posts

Site URL: https://harmonica-mandolin-k5zk.squarespace.com/


 So I need some help coding my nav menu, currently the font sits as this:image.thumb.png.c6415ebe5206991f172dba0ef32c6f0f.png


However I want the font to look like the rest of my custom font:



I have tried so many different codes that I've seen through this forum and I should add I'm new at this whole coding thing, I did this all last night by copying and pasting different codes I've seen. This is all the coding I have used for my font so far:

.newsletter-block .newsletter-form-button {
    font-family: 'Afrah-Light.otf' !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  letter-spacing: .12em !important;}

.collection-type-products .grid-title {
    font-family: 'Afrah-Regular.otf';
.blog-item-title h1 {
    font-family: 'Afrah-Regular.otf' !important;
nav#mainNavigation span {
    font-family: 'Afrah-thin.otf' !important;

.sqs-block-button-element {
    font-family: 'Afrah-Thin.otf' !important;

.header-title-text {
  font-family: 'Afrah-Regular.otf';
@font-face {

    font-family: 'Afrah-Regular.otf';

       src: url('https://static1.squarespace.com/static/6022cb3df94c921352bb00c0/t/6022cd7cc1e1cc6421e117e3/1612893564915/Afrah-Regular.otf');

@font-face {

    font-family: 'Afrah-Light.otf';

       src: url('https://static1.squarespace.com/static/6022cb3df94c921352bb00c0/t/6022cd6f5d81ae6201c0613a/1612893551991/Afrah-Light.otf');

@font-face {

    font-family: 'Afrah-Thin.otf';

       src: url('https://static1.squarespace.com/static/6022cb3df94c921352bb00c0/t/6022cd76eb9d5f2e0a0d72e2/1612893558855/Afrah-Thin.otf');

h1 {font-family: 'Afrah-Regular.otf';}
h2 {font-family: 'Afrah-Light.otf';}
h3 {font-family: 'Afrah-Light.otf';}
h4 {font-family: 'Afrah-Light.otf';}
p{font-family: 'Afrah-Regular.otf';}


and this is the coding I have most recently tried:

nav.header-menu-nav-list *, .header-nav * {
    font-family: 'Afrah-Light.otf' !important;


This is only in my phone version menu, as on the desktop version there isn't a drop down menu, I am also hoping it'll change the font on the desktop menu too.


Thanks in advance!

Link to comment
  • Replies 1
  • Views 514
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.