PabloHamburg Posted September 24 Share Posted September 24 Site URL: https://www.beratung-und-betreuung.de Hello everybody, I noticed that the font I installed may not display on some devices or on certain networks. Times New Roman appears instead. Does anyone have an idea what this could be? Sorry for the perhaps stupid question, but I'm a social worker and not a programmer. Thank you very much! Pablo Link to comment
Spark-Plugin Posted September 24 Share Posted September 24 Hello @PabloHamburg, Let me try to help you out. It's really important to carefully check your code when uploading a custom font—there might be something missing. But guess what? We have a blog post that covers this exact topic! Check it out here: https://www.sparkplugin.com/blog/custom-fonts-in-squarespace. Give it a look and let me know how it goes! - Answered by Iuno from sparkplugin.com Link to comment
PabloHamburg Posted September 27 Author Share Posted September 27 Hey, thanks for your feedback. I tried again and found no discrepancy in the code. I also uploaded the font again but it doesn't work. The font displays on my smartphone, but not on desktop browsers. That had worked before, but not anymore. Now also i get a Syntax error but i cant't find out why. Do you have any idea why? I should stick to social work, coding is not my business... Thank you very much. The complete code is: @font-face { font-family: 'Metropolis-Regular'; src: url(https://static1.squarespace.com/static/58ba88a26a4963d651adac6d/t/66f6fecd0c8c0d4d30a33878/1727463118076/Metropolis-Regular.ttf); } @font-face { font-family: 'Metropolis-Light'; src: url(https://static1.squarespace.com/static/58ba88a26a4963d651adac6d/t/66f6ff20ab658a107a7a2d03/1727463200464/Metropolis-Light.ttf); } @font-face { font-family: 'Metropolis-ExtraLight'; src: url(https://static1.squarespace.com/static/637d2b44fffad314ae0a69fd/t/6381222428fbc54453243e16/1669407270170/Metropolis-ExtraLight.ttfhttps://static1.squarespace.com/static/58ba88a26a4963d651adac6d/t/66f6ff43589f8d0b78641669/1727463235894/Metropolis-ExtraLight.ttf); } @font-face { font-family: 'Metropolis-Thin'; src: url(https://static1.squarespace.com/static/58ba88a26a4963d651adac6d/t/66f6ff6024b38a735517e8fd/1727463264917/Metropolis-Thin.ttf); } h1 { font-family:'Metropolis-Regular'!important; } h2, h3, h4 { font-family:'Metropolis-Regular'; } p { font-family: 'Metropolis-Regular'!important; } .sqsrte-large { font-family: 'Metropolis-Regular'; } .sqsrte-small { font-family: 'Metropolis-Regular'; } .sqs-block-button-element--large { font-family: 'Metropolis-Regular'; } .sqs-block-button-element { font-family: 'Metropolis-Light' !important; } .sqs-block-button-element--medium { font-family: 'Metropolis-Regular'; } .sqs-block-button-element--small { font-family: 'Metropolis-Regular'; } .header-nav *, nav.header-menu-nav-list * { font-family: 'Metropolis-Regular'!important; } /* Font Nav */ div #topNav a { font-family: 'Metropolis-Regular' !important; } /* Custom Font - Site Title */ .logo.site-title a { font-family: 'Metropolis-Light' !important; } header#header *, .mobile-bar-wrapper *, p { font-family: 'Metropolis-Regular' !important; } header#header *, .mobile-bar-wrapper *, h1, h2, h3 { font-family: 'Metropolis-Light' !important; } .Code Block{ font-family: 'Montserrat-ExtraLight'; } nav#main-navigation ul li a { font-family: 'Metropolis-Regular'; } nav#mobile-navigation ul li a { font-family: 'Metropolis-Regular'; } h1 { font-weight: !important; } Link to comment
Solution tuanphan Posted September 29 Solution Share Posted September 29 Extra Light has invalid font face code, it should be @font-face { font-family: 'Metropolis-ExtraLight'; src: url(https://static1.squarespace.com/static/637d2b44fffad314ae0a69fd/t/6381222428fbc54453243e16/1669407270170/Metropolis-ExtraLight.ttf); } 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