chailover Posted April 18, 2023 Share Posted April 18, 2023 hi guys, I've searched this on the forum for a while and have made all the changes and tweaks recommended but am still not getting any results. i've uploaded custom fonts to my squarespace (NibPro and ElanITC) but when I visit the website the headers are using times new roman still in places I've asked for our custom fonts to be used - in particular the home page, at various points and with respect to the site header text. Also, our Contact Us page block is still in the same font. Can anyone help? I've posted the CSS below in case I've done something really wrong... thanks! -- //Edit header fonts// @font-face { font-family: 'ElanITC'; src: url ('https://static1.squarespace.com/static/628f8fb45c6de7605ef05ef0/t/628f93e4f8a4833669bc131a/1653576676746/elanitcstd-medium.otf'); } h1 {font-family: 'ElanITC';} h2 {font-family: 'ElanITC';} h3 {font-family: 'ElanITC';} h4 {font-family: 'ElanITC';} // Site Title // .header-title-text a { font-family: 'NibPro-Regular' !important; } // Site Navigation // .header-nav-item a { font-family: 'ElanITC' !important; } // Button // .header-actions-action .btn { font-family: 'ElanITC' !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: 'ElanITC' !important; } //Edit paragraph fonts// @font-face { font-family: 'NibPro-Regular'; src: url('https://static1.squarespace.com/static/628f8fb45c6de7605ef05ef0/t/62912753087c443cb4184675/1653679955085/NibPro-Regular.ttf'); } .sqsrte-large {font-family: 'NibPro-Regular';} p {font-family: 'NibPro-Regular';} .sqsrte-small {font-family: 'NibPro-Regular';} .newsletter-block .newsletter-form-field-element::placeholder { font-family: NibPro-Regular; } // Small or Tertiary Button // .sqs-block-button-element--small, .sqs-button-element--tertiary { font-family: NibPro-Regular !important; } // Medium or Primary Button // .sqs-block-button-element--medium, .sqs-button-element--primary { font-family: NibPro-Regular !important; } // Large or Secondary Button // .sqs-block-button-element--large, .sqs-button-element--secondary { font-family: NibPro-Regular !important; } .form-wrapper .field-list .title { font-family: 'ElanITC'; color: #FFFFFF; } .form-wrapper .field-list .field .caption { font-family: ElanITC; font-size: 9px; color: #FFFFFF; } /* blog title font */ h1.blog-title, h1.entry-title, a.summary-title-link { font-family: 'ElanITC' !important; } body.view-list .blog-date { font-family: NibPro-Regular; font-size: 15px } //google recaptcha styling .captcha-container { opacity: .3; transition: opacity .3s ease; } .newsletter-form-body:focus-within .captcha-container, .form-wrapper:focus-within .captcha-container, .captcha-container:hover { opacity: 1; } Link to comment
VisualNotes Posted April 18, 2023 Share Posted April 18, 2023 Have you tried woff and woff2 font formats? I am successfully using fonts uploaded in these formats (and ttf). Link to comment
chailover Posted April 18, 2023 Author Share Posted April 18, 2023 (edited) hi, no I haven't tried these formats. i just tried to find the custom font in woff formats but can't find them to purchase. is the coding correct? and you think its the font itself? Edited April 18, 2023 by chailover Link to comment
chailover Posted April 18, 2023 Author Share Posted April 18, 2023 (edited) i think i solved it: the reference name in the code of the font for Elan was not the same as that uploaded onto the CSS custom font ('elanitcstd-medium'). EDIT: I didn't solve it it seems; I checked another desktop using safari and it still isn't showing. I'm lost! @tuanphan any ideas on this one as you seem to be a master of solving these custom font issues! FYI - someone mentioned above using a WOFF/WOFF2 format. would this help? I have my elan in OTF format. nibpro is in ttf and this is working fine. also, it seems to be working now on my desktop, but on my mobile device it does not show properly! any ideas what the reason is for this? here's the updated code if anyone can help! thank you! //Edit header fonts// @font-face { font-family: 'elanitcstd-medium'; src: url ('https://static1.squarespace.com/static/628f8fb45c6de7605ef05ef0/t/628f93e4f8a4833669bc131a/1653576676746/elanitcstd-medium.otf'); } h1 {font-family: 'elanitcstd-medium';} h2 {font-family: 'elanitcstd-medium';} h3 {font-family: 'elanitcstd-medium';} h4 {font-family: 'elanitcstd-medium';} // Site Title // .header-title-text a { font-family: 'NibPro-Regular' !important; } // Site Navigation // .header-nav-item a { font-family: 'elanitcstd-medium' !important; } // Button // .header-actions-action .btn { font-family: 'elanitcstd-medium' !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: 'elanitcstd-medium' !important; } //Edit paragraph fonts// @font-face { font-family: 'NibPro-Regular'; src: url('https://static1.squarespace.com/static/628f8fb45c6de7605ef05ef0/t/62912753087c443cb4184675/1653679955085/NibPro-Regular.ttf'); } .sqsrte-large {font-family: 'NibPro-Regular';} p {font-family: 'NibPro-Regular';} .sqsrte-small {font-family: 'NibPro-Regular';} .newsletter-block .newsletter-form-field-element::placeholder { font-family: NibPro-Regular; } // Small or Tertiary Button // .sqs-block-button-element--small, .sqs-button-element--tertiary { font-family: NibPro-Regular !important; } // Medium or Primary Button // .sqs-block-button-element--medium, .sqs-button-element--primary { font-family: NibPro-Regular !important; } // Large or Secondary Button // .sqs-block-button-element--large, .sqs-button-element--secondary { font-family: NibPro-Regular !important; } .form-wrapper .field-list .title { font-family: 'elanitcstd-medium'; color: #FFFFFF; } .form-wrapper .field-list .field .caption { font-family: 'elanitcstd-medium'; font-size: 9px; color: #FFFFFF; } /* blog title font */ h1.blog-title, h1.entry-title, a.summary-title-link { font-family: 'elanitcstd-medium' !important; } body.view-list .blog-date { font-family: NibPro-Regular; font-size: 15px } //google recaptcha styling .captcha-container { opacity: .3; transition: opacity .3s ease; } .newsletter-form-body:focus-within .captcha-container, .form-wrapper:focus-within .captcha-container, .captcha-container:hover { opacity: 1; } Edited April 18, 2023 by chailover Link to comment
VisualNotes Posted April 18, 2023 Share Posted April 18, 2023 If the url of the uploaded font is correct and the name of the font-family is correct, it should actually work, even without the !important property. Here, for example, is my custom CSS, which works well: /*** LOCAL FONTS ***/ /* poppins-300 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.woff2') format('woff2'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.woff') format('woff'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.ttf') format('truetype'); } /* poppins-regular - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.woff2') format('woff2'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.woff') format('woff'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.ttf') format('truetype'); } /* poppins-500 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.woff2') format('woff2'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.woff') format('woff'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.ttf') format('truetype'); } /* Overwrite the font-family of all relevant elements */ h1, h2, h3, h4 { font-family:'Poppins'; font-weight: 500; } p { font-family: 'Poppins'; font-weight: 300; } .sqsrte-large { font-family: 'Poppins'; font-weight: 300; } .sqsrte-small { font-family: 'Poppins'; font-weight: 300; } .header-nav-item a { font-family: 'Poppins'; font-weight: 400; text-transform: uppercase; } /* Mobile navigation */ .header-menu-nav-item a { font-family: 'Poppins'; } /* Website title */ .header-title-text a { font-family: 'Poppins'; } /* Blog title */ h1.blog-title { font-family: 'Poppins'; } Link to comment
VisualNotes Posted April 18, 2023 Share Posted April 18, 2023 (edited) By the way, fonts have proper names which are case-sensitive. As for Google Webfonts, this is a very helpful tool for dealing with local fonts:https://gwfh.mranftl.com/fonts Edited April 18, 2023 by VisualNotes Link to comment
chailover Posted April 18, 2023 Author Share Posted April 18, 2023 thanks, i only realised that now. i have updated the case and it still doesn't work correctly. i checked the google webfonts link you sent but this does not have elan on it Link to comment
tuanphan Posted April 22, 2023 Share Posted April 22, 2023 Hi, What is your site url? We can check easier 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment