adriennegrace Posted October 3, 2022 Share Posted October 3, 2022 (edited) Hello @tuanphan! I'm having the same issue as others above. The font I'm using shows up on the laptop it was installed on but not on any other computers or phones. Here's the site: https://www.progenyforthcoming.com/ It should look like the attached image. Here's my code: @font-face { font-family: 'Sud'; src: url('https://static1.squarespace.com/static/62fb0549d8f1516d31c9da6e/t/630f8035bc504575c3b482a0/1661960245215/Sud.woff'); } h1, h2, h3, h4 { font-family: 'Sud'; } Can you help? Edited October 3, 2022 by adriennegrace forgot url Link to comment
D4D0M3N Posted October 3, 2022 Share Posted October 3, 2022 Me also. On any other devices, fonts are not showing properly. www.domengabriel.com 312 @font-face { font-family: 'Moonlite Outline'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8040b014444853ef041/1662101508201/Moonlite+Outline.otf); font-family: 'Moonlite Solid'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8136a3ef47a46804869/1662101523086/Moonlite+Solid.otf); font-family: 'Roboto Mono'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6329d128a34b69526f7c2649/1663684905094/RobotoMono-Regular.ttf); } h1 {-webkit-text-stroke: 1px white;font-family: 'Moonlite Solid',sans-serif !important; line-height: 86% !important; color: rgba(0,0,0,0)!important; transition: color 6s; } h1 em { font-family: 'Moonlite Outline',sans-serif !important; font-style: normal; text-transform: uppercase; text-shadow: 0 0 10px #fff; } h4 em { font-style: normal !important; font-family: 'Moonlite Outline',sans-serif !important; text-transform: uppercase; color: white; } h4 { font-style: normal !important; font-family: 'Moonlite Outline',sans-serif !important; text-transform: uppercase; text-indent: 1%; margin-left: 3px; } Link to comment
tuanphan Posted October 4, 2022 Share Posted October 4, 2022 15 hours ago, D4D0M3N said: Me also. On any other devices, fonts are not showing properly. www.domengabriel.com 312 @font-face { font-family: 'Moonlite Outline'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8040b014444853ef041/1662101508201/Moonlite+Outline.otf); font-family: 'Moonlite Solid'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8136a3ef47a46804869/1662101523086/Moonlite+Solid.otf); font-family: 'Roboto Mono'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6329d128a34b69526f7c2649/1663684905094/RobotoMono-Regular.ttf); } h1 {-webkit-text-stroke: 1px white;font-family: 'Moonlite Solid',sans-serif !important; line-height: 86% !important; color: rgba(0,0,0,0)!important; transition: color 6s; } h1 em { font-family: 'Moonlite Outline',sans-serif !important; font-style: normal; text-transform: uppercase; text-shadow: 0 0 10px #fff; } h4 em { font-style: normal !important; font-family: 'Moonlite Outline',sans-serif !important; text-transform: uppercase; color: white; } h4 { font-style: normal !important; font-family: 'Moonlite Outline',sans-serif !important; text-transform: uppercase; text-indent: 1%; margin-left: 3px; } 3 fonts, you need to declare 3 font face @font-face { font-family: 'Moonlite Outline'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8040b014444853ef041/1662101508201/Moonlite+Outline.otf); } @font-face { font-family: 'Moonlite Solid'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8136a3ef47a46804869/1662101523086/Moonlite+Solid.otf); } @font-face { font-family: 'Roboto Mono'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6329d128a34b69526f7c2649/1663684905094/RobotoMono-Regular.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
adriennegrace Posted October 4, 2022 Share Posted October 4, 2022 Hey @tuanphan did you see my reply/request above? Link to comment
D4D0M3N Posted October 5, 2022 Share Posted October 5, 2022 You are a life safer. Thank you! Link to comment
tuanphan Posted October 8, 2022 Share Posted October 8, 2022 On 10/3/2022 at 10:58 PM, adriennegrace said: Hello @tuanphan! I'm having the same issue as others above. The font I'm using shows up on the laptop it was installed on but not on any other computers or phones. Here's the site: https://www.progenyforthcoming.com/ It should look like the attached image. Here's my code: @font-face { font-family: 'Sud'; src: url('https://static1.squarespace.com/static/62fb0549d8f1516d31c9da6e/t/630f8035bc504575c3b482a0/1661960245215/Sud.woff'); } h1, h2, h3, h4 { font-family: 'Sud'; } Can you help? Sorry. Didn't see your comment. Can you add & keep the code in Custom CSS? 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
noahsartsocialmedia Posted November 7, 2022 Share Posted November 7, 2022 (edited) Hi @tuanphanI am also facing the same problem, this is my CSS and its not working although I have tried many ways. @font-face{ font-family:'Quentin'; src:url(https://static1.squarespace.com/static/62d05686ea75dc6a355847ae/t/62d850caa6c158774fac1bab/1658343626861/UniversLTStdRoman.otf); font-weight:'UniversLTStdRoman'; } h2{ font-family:'UniversLTStdRoman'; } @font-face{ font-family:'ravie'; src:url('https://static1.squarespace.com/static/62d05686ea75dc6a355847ae/t/62d850caa6c158774fac1bab/1658343626861/UniversLTStdRoman.otfhttps://static1.squarespace.com/static/62d05686ea75dc6a355847ae/t/63336861ac4b563d37bd35ba/1664313441211/RAVIE.TTFhttps://static1.squarespace.com/static/62d05686ea75dc6a355847ae/t/63336861ac4b563d37bd35ba/1664313441211/RAVIE.TTF'); font-weight:'RAVIE'; } h3{ font-family:'RAVIE'; } Edited November 8, 2022 by noahsartsocialmedia Link to comment
ben44 Posted November 8, 2022 Share Posted November 8, 2022 Hello - i've been having just this problem: custom fonts work fine on desktop but do not work on mobile (tried edge, chrome and safari). None of the solutions above seem to apply, if anyone could review the CSS i'd be grateful. I added in the different font file types after this was suggested elsewhere. TIA @font-face { font-family: 'GraphikLight'; src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c8259b702b033e8454d7/1667745830252/Graphik-Light.eot'); /* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c84031882d27512fe37a/1667745856527/Graphik-Light.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c8377c56ce5aa2090ca6/1667745847626/Graphik-Light.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c82ebe37b4235ab85ada/1667745838777/Graphik-Light.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family: 'GraphikMedium'; src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367ca62747b1571f9deabcc/1667746403212/Graphik-Medium.eot'); /* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367ca7bd9d75066a7032080/1667746427088/Graphik-Medium.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367ca712ff5e829c349af8d/1667746417502/Graphik-Medium.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367ca6a772d857127d7913c/1667746410281/Graphik-Medium.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family: 'GraphikRegular'; src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c99a3dde1608dd802cc5/1667746206848/Graphik-Regular.eot'); /* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c9d6f6d8dc0afbbc686a/1667746262361/Graphik-Regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c9bc7c56ce5aa2094003/1667746237013/Graphik-Regular.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c9aed1be552f5f00cec8/1667746222516/Graphik-Regular.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family: 'GraphikSemibold'; src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367cae07b072171a45e8897/1667746529037/Graphik-Semibold.eot'); /* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367cafeb29e8e13267bed43/1667746558591/Graphik-Semibold.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367caf198afa26fbd9ba0d0/1667746545462/Graphik-Semibold.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367cae7e1b65f028fbdc9a8/1667746536262/Graphik-Semibold.ttf') format('truetype'); /* Safari, Android, iOS */ } /*ASSIGING CUSTOM FONTS*/ h1 {font-family: 'GraphikMedium' !important;} h2 {font-family: 'GraphikLight' !important;} h3 {font-family: 'GraphikLight' !important;} h4 {font-family: 'GraphikMedium' !important;} p {font-family: 'GraphikRegular' !important;} .sqsrte-small {font-family: 'GraphikRegular' !important;} .sqsrte-large {font-family: 'GraphikRegular' !important;} Link to comment
tuanphan Posted November 10, 2022 Share Posted November 10, 2022 On 11/8/2022 at 3:28 AM, noahsartsocialmedia said: Hi @tuanphanI am also facing the same problem, this is my CSS and its not working although I have tried many ways. @font-face{ font-family:'Quentin'; src:url(https://static1.squarespace.com/static/62d05686ea75dc6a355847ae/t/62d850caa6c158774fac1bab/1658343626861/UniversLTStdRoman.otf); font-weight:'UniversLTStdRoman'; } h2{ font-family:'UniversLTStdRoman'; } @font-face{ font-family:'ravie'; src:url('https://static1.squarespace.com/static/62d05686ea75dc6a355847ae/t/62d850caa6c158774fac1bab/1658343626861/UniversLTStdRoman.otfhttps://static1.squarespace.com/static/62d05686ea75dc6a355847ae/t/63336861ac4b563d37bd35ba/1664313441211/RAVIE.TTFhttps://static1.squarespace.com/static/62d05686ea75dc6a355847ae/t/63336861ac4b563d37bd35ba/1664313441211/RAVIE.TTF'); font-weight:'RAVIE'; } h3{ font-family:'RAVIE'; } Font weight in font-face code is invalid. You need to remove it 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
tuanphan Posted November 12, 2022 Share Posted November 12, 2022 On 11/9/2022 at 1:16 AM, ben44 said: Hello - i've been having just this problem: custom fonts work fine on desktop but do not work on mobile (tried edge, chrome and safari). None of the solutions above seem to apply, if anyone could review the CSS i'd be grateful. I added in the different font file types after this was suggested elsewhere. TIA @font-face { font-family: 'GraphikLight'; src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c8259b702b033e8454d7/1667745830252/Graphik-Light.eot'); /* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c84031882d27512fe37a/1667745856527/Graphik-Light.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c8377c56ce5aa2090ca6/1667745847626/Graphik-Light.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c82ebe37b4235ab85ada/1667745838777/Graphik-Light.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family: 'GraphikMedium'; src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367ca62747b1571f9deabcc/1667746403212/Graphik-Medium.eot'); /* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367ca7bd9d75066a7032080/1667746427088/Graphik-Medium.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367ca712ff5e829c349af8d/1667746417502/Graphik-Medium.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367ca6a772d857127d7913c/1667746410281/Graphik-Medium.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family: 'GraphikRegular'; src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c99a3dde1608dd802cc5/1667746206848/Graphik-Regular.eot'); /* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c9d6f6d8dc0afbbc686a/1667746262361/Graphik-Regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c9bc7c56ce5aa2094003/1667746237013/Graphik-Regular.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367c9aed1be552f5f00cec8/1667746222516/Graphik-Regular.ttf') format('truetype'); /* Safari, Android, iOS */ } @font-face { font-family: 'GraphikSemibold'; src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367cae07b072171a45e8897/1667746529037/Graphik-Semibold.eot'); /* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367cafeb29e8e13267bed43/1667746558591/Graphik-Semibold.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367caf198afa26fbd9ba0d0/1667746545462/Graphik-Semibold.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5f1c958239290f367ac6594d/t/6367cae7e1b65f028fbdc9a8/1667746536262/Graphik-Semibold.ttf') format('truetype'); /* Safari, Android, iOS */ } /*ASSIGING CUSTOM FONTS*/ h1 {font-family: 'GraphikMedium' !important;} h2 {font-family: 'GraphikLight' !important;} h3 {font-family: 'GraphikLight' !important;} h4 {font-family: 'GraphikMedium' !important;} p {font-family: 'GraphikRegular' !important;} .sqsrte-small {font-family: 'GraphikRegular' !important;} .sqsrte-large {font-family: 'GraphikRegular' !important;} What is your site url? 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
tonton Posted November 30, 2022 Share Posted November 30, 2022 The same issue here as well. // THIS IS THE CODE THAT WAS ON THE PREVIOUS SITE // a:not(.sqs-block-button-element) { // color: #00A3B0 !important; // standard link color &:active { color: #43403C !important; // color link goes when clicked } } // Göra menyn semi-tranparent (Light Minimal) body[data-menu-overlay-theme-switcher="true"] .header.light { background-color: rgba(245,245,245 ,0.5)!important; backdrop-filter: blur(10px); } body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .light .header-nav-folder-content { background-color: rgba(245,245,245 ,1)!important; backdrop-filter: blur(10px); color: #blue!important; border-radius: 10px; } // Göra menyn semi-tranparent (Dark Bold) body[data-menu-overlay-theme-switcher="true"] .header.dark-bold { background-color: rgba(54,88,107 ,0.7)!important; backdrop-filter: blur(10px); } body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .dark-bold .header-nav-folder-content { background-color: rgba(71,109,131 ,0.9)!important; backdrop-filter: blur(10px); border-radius: 5px; } //Boxar (Används inte) .box { background-color: rgba(71,109,131 ,1); padding: 20px; //height: 500px; } // Avståndet mellan varje bokstav i menyn .header-nav-item, .user-accounts-text-link, .cart-text-link { letter-spacing: 0.0em; font-size: 14px; } //Övrigt .sprak { background-color: transparant; right: 0; position: absolute; z-index: 1001; padding: 10px 15px 0 0; } .sprak a { color: #1111; font-size: 0.6em; margin-right: 7px; } .header-inner { padding-top: 38px; } .tletable { border: 1px solid #cccccc; background-color: white; th { padding: 13px; color: #333333; background-color: #f0f0f0; } td { padding: 13px; } .hogerstallt {text-align:right} .vansterstallt {text-align:left} } .edittable { border: 1px solid #9b9b9b; background-color: white; font-size:12px; font-weight:normal; th { padding: 5px; color: #ffffff; background-color: #1f4e78; } td { padding: 5px; } } .printtable { border: 1px solid #9b9b9b; background-color: white; font-size:12px; font-weight:normal; th { padding: 5px; color: #ffffff; background-color: #1f4e78; font-weight:normal; } td { padding: 5px; } } .dialogfonster { border: 1px solid #a0a0a0; background-color: white; font-size:14px; padding: 5px; color: #000000; th { padding: 5px; font-weight:normal; } td { padding: 5px; } } .tips { border: 1px solid #11cfeb; background-color: #e9fcff; font-size:14px; padding: 5px; color: #000000; th { padding: 20px; font-weight:normal; } td { padding: 20px; } } .filterwindow { border: 1px solid #dddddd; background-color: #ffffff; font-size:14px; padding: 5px; color: #20b2aa; th { padding: 20px; font-weight:normal; } td { padding: 20px; } } .example { border: 1px solid #8c8c8c; background-color: #f0f0f0; font-size:14px; padding: 5px; color: #000000; th { padding: 20px; font-weight:normal; } td { padding: 20px; } } .statements { border: 1px solid #58a3bf; background-color: #658d9c; font-size:16px; padding: 5px; color: #ffffff; th { padding: 10px; font-weight:normal; } } .hogerstallt {text-align:right} .vansterstallt {text-align:left} .selectedrow_blue { color: #ffffff; background-color: #0078d7; } .selectedrow_yellow { color: #000000; background-color: #ffff00; } .selectedrow_grey { color: #1f4e78; background-color: #d9d9d9; font-weight:bold; } .rowcolor_yellow { background-color: #ffffcc; } .rowcolor_lightgrey { color: #333333; background-color: #f9f9f9; } .gridlines { border: 1px solid #cccccc; } /*setup language switcher*/ .language { color: #dddddd; font-size:14px !important; padding: 0px; top: 25px !important; right: 80px !important; position: fixed; z-index: 99999; a { color: #dddddd; &:hover { opacity: 0.8; } } } .header-nav nav a {visibility: hidde} .header-nav nav .multilanguage a {visibility: visible} .header-actions-action .btn { padding: 20px 30px; font-size: 15px; color: #204051 !important; background: white !important; border-color: violet !important; } // THIS MY CODE FOR CODE FOR ACCORDION BLOCKS AND VIDEO// /* accordion title colors */ li.accordion-item:nth-child(1) .accordion-item__title { color: #325A5A; /* accordion content specific word color */ .accordion-item__description strong { font-weight: normal; color: #325A5A; } } /*#block-yui_3_17_2_1_1667640795519_993251 {border-top: 4px solid grey} .page-section:nth-child(6) {border-bottom: px solid black} */ // THIS MY CODE FOR CUSTOM-FONTS__// @font-face { font-family: 'Black'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd63991/1667037341381/Raleway-Black.ttf); } @font-face { font-family: 'BlackItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd63993/1667037341412/Raleway-BlackItalic.ttf); } @font-face { font-family: 'Raleway-Bold'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd63995/1667037341443/Raleway-Bold.ttf); } @font-face { font-family: 'Raleway-BoldItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd63997/1667037341482/Raleway-BoldItalic.ttf); } @font-face { font-family: 'Raleway-ExtraBold'; src: url(https://static1.squarespace.com/static/634d4558d6fbbb5280318717/t/6355438aff7b3464246a40ec/1666532234399/Raleway-ExtraBold.ttf); } @font-face { font-family: 'Raleway-ExtraBoldItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd6399b/1667037341548/Raleway-ExtraBoldItalic.ttf); } @font-face { font-family: 'Raleway-ExtraLight'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd6399d/1667037341584/Raleway-ExtraLight.ttf); } @font-face { font-family: 'Raleway-ExtraLightItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd6399f/1667037341614/Raleway-ExtraLightItalic.ttf); } @font-face { font-family: 'Raleway-Italic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639a2/1667037341652/Raleway-Italic.ttf); } @font-face { font-family: 'Raleway-Light'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639a4/1667037341684/Raleway-Light.ttf); } @font-face { font-family: 'Raleway-LightItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639bf/1667037341726/Raleway-LightItalic.ttf); } @font-face { font-family: 'Raleway-Medium'; src: url(https://static1.squarespace.com/static/634d4558d6fbbb5280318717/t/635543c10d38433db09d9865/1666532289805/Raleway-Medium.ttf); } @font-face { font-family: 'Raleway-MediumItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639c3/1667037341802/Raleway-MediumItalic.ttf); } @font-face { font-family: 'Raleway-Regular'; src: url(https://static1.squarespace.com/static/634d4558d6fbbb5280318717/t/635543ce7c8ae732dae5b23c/1666532302795/Raleway-Regular.ttf); } @font-face { font-family: 'Raleway-SemiBold'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639c7/1667037341878/Raleway-SemiBold.ttf); } @font-face { font-family: 'Raleway-SemiBoldItalic'; src: url(https://static1.squarespace.com/static/6376481e39aacb26f720916f/t/6376492839aacb26f720d39b/1667037341906/Raleway-SemiBoldItalic.ttf); } @font-face { font-family: 'Raleway-Thin'; src: url(https://static1.squarespace.com/static/6376481e39aacb26f720916f/t/6376492839aacb26f720d39e/1667037341938/Raleway-Thin.ttf); } @font-face { font-family: 'Raleway-ThinITalic'; src: url(https://static1.squarespace.com/static/6376481e39aacb26f720916f/t/6376492839aacb26f720d3a0/1667037341972/Raleway-ThinItalic.ttf); } h1, h2, h3, h4 { font-family: 'Raleway-Bold' !important; text-transform: uppercase; } //__SITE-TITLE__// .header-title-text a { font-family: 'Raleway-Regular' !important; } //__SITE-NAVIGATION__// .header-nav-item a { font-family: 'Raleway-Regular' !important; text-transform: uppercase; font-size: clamp(12px,1vw,17px); } //__HEADER-BUTTON__// .header-actions-action .btn { font-family: 'Raleway-Bold' !important; font-size: 12px !important; } //__ANNOUNCMENT-BAR__// .sqs-announcement-bar-url a { font-family: 'Raleway-Regular' !important; } //__SMALL-TERTIARY-BUTTON__// .sqs-block-button-element--small, .sqs-button-element--tertiary { font-family: 'Raleway-Bold' !important; text-transform: uppercase !important; font-size: 15px !important; } //__MEDIUM-PRIMARY-BUTTON__// .sqs-block-button-element--medium, .sqs-button-element--primary { font-family: 'Raleway-Bold' !important; text-transform: uppercase !important; font-size: 15px !important; } //__SECONDARY-BUTTON__// .sqs-block-button-element--large, .sqs-button-element--secondary { font-family: 'Raleway-Bold' !important; text-transform: uppercase !important; font-size: 15px !important; } //__HEADINGS-FONT-TYPE-COLOR-AND-UPPERCASE__// h1, h2, h3, h4, h5 { font-family:'Raleway-Bold'; text-transform: uppercase; } sqsrte-large, p, sqsrte-small { font-family: 'Raleway-Regular'!important; } //__SPECIFIC_SECTION_PAGE-1_SEC-1__// section[data-section-id="6376488439aacb26f720ab68"] { } // CLAMP FUNCTION// h1, { font-size: clamp(33px,3vw,50px); position: relative; bottom: clamp(5px,1vw,5px)!important; width: clamp(70%,37vw,100%)!important; } //__PARAGRAPH-2_PARAGRAPH-BLOCK-SECTION-1__// #block-b92b581ebc4619e86bbf, p { font-size: clamp(16px,1vw,17px); position: relative; top: -5px; } //__PRIMARY-BUTTON__// .sqs-block-button-element--medium, .sqs-button-element--primary { font-size: clamp(12px,1vw,15px) !important; /*width: clamp(70%,20vw,100%)!important;*/ } //__PRIMARY-BUTTON-PAGE-1-SECTION-1__// #block-2df079361c5ddc29ff15 { font-size: clamp(10px,8vw,15px)!important; position: relative; bottom: 12px } // THIS IS MY MEDIA QUERY CODE// //_BAKGRUNDER_//----- // Medium devices (tablets, 3000px and up) @media (max-width: 3000px) { section[data-section-id="6376488439aacb26f720ab68"] { position: absolute; top: 108px !important; right: 0 !important; bottom: 0 !important; left: 0 !important; margin-bottom: 0 !important; } #block-2df079361c5ddc29ff15, #block-fb59ae81dfd30dce5f1c,#block-b92b581ebc4619e86bbf { position: relative; top: -108px !important; right: 0 !important; bottom: 0 !important; left: 0 !important; visibility:hidde; width: clamp(70%,40vw,90%)!important; margin-top: 20px; } #block-yui_3_17_2_1_1667555226387_6404144 { position: relative; top: -120px !important; } #block-yui_3_17_2_1_1667473268423_68801 { min-width: 100%; position:relative; top: 22px; left: -20px; } #block-b6393a5b817ff3360c63 { position: relative; bottom: -25px; } } //_BAKGRUNDER_//----- // Medium devices (tablets, 980px and up) @media (max-width: 980px) { h1 { width:100% !important; } section[data-section-id="6376488439aacb26f720ab68"] #block-fb59ae81dfd30dce5f1c { visibility:hidde; position: relative; top: -100px !important; left: -50px!important; width: clamp(60%,1vw,50%) !important; } #block-b92b581ebc4619e86bbf, { position: relative; top: -100px !important; left: -50px!important; width: clamp(90%,20vw,100%) !important; } p { font-size: clamp(13px,1vw, 14px) } #block-2df079361c5ddc29ff15 { position: relative; top: -100px !important; left: -50px!important; width: clamp(80%,1vw,100%) !important; } //_BAKGRUNDER_//----- // Medium devices (tablets, 900px and up) @media (max-width: 900px) { h1 { width:100% !important; } section[data-section-id="6376488439aacb26f720ab68"] #block-fb59ae81dfd30dce5f1c { visibility:hiddn!important; position: relative; top: 70px !important; left: -50px!important; width: clamp(70%,10vw,100%) !important; } #block-b92b581ebc4619e86bbf, { position: relative; top: 70px !important; left: -50px!important; width: clamp(100%,50vw,100%) !important; } p { font-size: clamp(13px,3vw, 14px) } #block-2df079361c5ddc29ff15 { position: relative; top: 60px !important; left: -50px!important; width: clamp(80%,40vw,90%) !important; } } //_BAKGRUNDER_//----- // Medium devices (tablets, 768px and up) @media (max-width: 767px) { h1 { width:100% !important; } section[data-section-id="6376488439aacb26f720ab68"] #block-fb59ae81dfd30dce5f1c { visibility:hidde!important; position: relative; top: 60px !important; left: 1px!important; width: clamp(80%,100vw,10%) !important; } #block-b92b581ebc4619e86bbf, { visibility:hidde!important; position: relative; top: -70px !important; left: 1px!important; width: clamp(80%,10vw,100%) !important; } p { font-size: clamp(15px,1vw, 14px) } #block-2df079361c5ddc29ff15 { position: relative; top: -115px !important; left: -1px!important; width: clamp(57%,1vw,57%) !important; } } //_BAKGRUNDER_//----- // Medium devices (tablets, 428px and up) @media (max-width: 428px) { h1 { width:100% !important; } section[data-section-id="6376488439aacb26f720ab68"] #block-fb59ae81dfd30dce5f1c { visibility:hidde!important; position: relative; top: 65px !important; left: 1px!important; width: clamp(95%,30vw,100%) !important; } #block-b92b581ebc4619e86bbf, { visibility:hidde!important; position: relative; top: -65px !important; left: 1px!important; width: clamp(95%,10vw,100%) !important; } p { font-size: clamp(13px,1vw, 14px) } #block-2df079361c5ddc29ff15 { position: relative; top: -115px !important; left: -1px!important; width: clamp(40%,50vw,90%) !important; } } a.summary-title-link { font-family: 'Raleway-Bold' !important; text-transform: uppercase; padding-bottom: 50px !important; } .summary-title { margin-bottom:30px !important; } .summary-excerpt.summary-excerpt-only p { line-height:1.7em !important; margin-top:20px !important; } a.summary-read-more-link { background-color: #164448 !important; color: white !important; padding:20px; border-radius:40px; max-width:50% !important; text-align: center !important; } .sqs-button-element--tertiary { font-size:25px !important; } .summary-thumbnail.img-wrapper.preFade .fadeIn { transition-duration: 5000s !important; transition-delay:10s !important; } header#header { background: #154448 !important; } /* Change dropdown menu background */ .header-nav-folder-content { background: #154448 !important; } .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 90px; position: absolute; bottom: 10%; left: 90%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { color: #000; padding: 12px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { color: #000; padding: 12px;} } Link to comment
tuanphan Posted December 2, 2022 Share Posted December 2, 2022 On 11/30/2022 at 5:54 PM, tonton said: The same issue here as well. // THIS IS THE CODE THAT WAS ON THE PREVIOUS SITE // a:not(.sqs-block-button-element) { // color: #00A3B0 !important; // standard link color &:active { color: #43403C !important; // color link goes when clicked } } // Göra menyn semi-tranparent (Light Minimal) body[data-menu-overlay-theme-switcher="true"] .header.light { background-color: rgba(245,245,245 ,0.5)!important; backdrop-filter: blur(10px); } body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .light .header-nav-folder-content { background-color: rgba(245,245,245 ,1)!important; backdrop-filter: blur(10px); color: #blue!important; border-radius: 10px; } // Göra menyn semi-tranparent (Dark Bold) body[data-menu-overlay-theme-switcher="true"] .header.dark-bold { background-color: rgba(54,88,107 ,0.7)!important; backdrop-filter: blur(10px); } body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .dark-bold .header-nav-folder-content { background-color: rgba(71,109,131 ,0.9)!important; backdrop-filter: blur(10px); border-radius: 5px; } //Boxar (Används inte) .box { background-color: rgba(71,109,131 ,1); padding: 20px; //height: 500px; } // Avståndet mellan varje bokstav i menyn .header-nav-item, .user-accounts-text-link, .cart-text-link { letter-spacing: 0.0em; font-size: 14px; } //Övrigt .sprak { background-color: transparant; right: 0; position: absolute; z-index: 1001; padding: 10px 15px 0 0; } .sprak a { color: #1111; font-size: 0.6em; margin-right: 7px; } .header-inner { padding-top: 38px; } .tletable { border: 1px solid #cccccc; background-color: white; th { padding: 13px; color: #333333; background-color: #f0f0f0; } td { padding: 13px; } .hogerstallt {text-align:right} .vansterstallt {text-align:left} } .edittable { border: 1px solid #9b9b9b; background-color: white; font-size:12px; font-weight:normal; th { padding: 5px; color: #ffffff; background-color: #1f4e78; } td { padding: 5px; } } .printtable { border: 1px solid #9b9b9b; background-color: white; font-size:12px; font-weight:normal; th { padding: 5px; color: #ffffff; background-color: #1f4e78; font-weight:normal; } td { padding: 5px; } } .dialogfonster { border: 1px solid #a0a0a0; background-color: white; font-size:14px; padding: 5px; color: #000000; th { padding: 5px; font-weight:normal; } td { padding: 5px; } } .tips { border: 1px solid #11cfeb; background-color: #e9fcff; font-size:14px; padding: 5px; color: #000000; th { padding: 20px; font-weight:normal; } td { padding: 20px; } } .filterwindow { border: 1px solid #dddddd; background-color: #ffffff; font-size:14px; padding: 5px; color: #20b2aa; th { padding: 20px; font-weight:normal; } td { padding: 20px; } } .example { border: 1px solid #8c8c8c; background-color: #f0f0f0; font-size:14px; padding: 5px; color: #000000; th { padding: 20px; font-weight:normal; } td { padding: 20px; } } .statements { border: 1px solid #58a3bf; background-color: #658d9c; font-size:16px; padding: 5px; color: #ffffff; th { padding: 10px; font-weight:normal; } } .hogerstallt {text-align:right} .vansterstallt {text-align:left} .selectedrow_blue { color: #ffffff; background-color: #0078d7; } .selectedrow_yellow { color: #000000; background-color: #ffff00; } .selectedrow_grey { color: #1f4e78; background-color: #d9d9d9; font-weight:bold; } .rowcolor_yellow { background-color: #ffffcc; } .rowcolor_lightgrey { color: #333333; background-color: #f9f9f9; } .gridlines { border: 1px solid #cccccc; } /*setup language switcher*/ .language { color: #dddddd; font-size:14px !important; padding: 0px; top: 25px !important; right: 80px !important; position: fixed; z-index: 99999; a { color: #dddddd; &:hover { opacity: 0.8; } } } .header-nav nav a {visibility: hidde} .header-nav nav .multilanguage a {visibility: visible} .header-actions-action .btn { padding: 20px 30px; font-size: 15px; color: #204051 !important; background: white !important; border-color: violet !important; } // THIS MY CODE FOR CODE FOR ACCORDION BLOCKS AND VIDEO// /* accordion title colors */ li.accordion-item:nth-child(1) .accordion-item__title { color: #325A5A; /* accordion content specific word color */ .accordion-item__description strong { font-weight: normal; color: #325A5A; } } /*#block-yui_3_17_2_1_1667640795519_993251 {border-top: 4px solid grey} .page-section:nth-child(6) {border-bottom: px solid black} */ // THIS MY CODE FOR CUSTOM-FONTS__// @font-face { font-family: 'Black'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd63991/1667037341381/Raleway-Black.ttf); } @font-face { font-family: 'BlackItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd63993/1667037341412/Raleway-BlackItalic.ttf); } @font-face { font-family: 'Raleway-Bold'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd63995/1667037341443/Raleway-Bold.ttf); } @font-face { font-family: 'Raleway-BoldItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd63997/1667037341482/Raleway-BoldItalic.ttf); } @font-face { font-family: 'Raleway-ExtraBold'; src: url(https://static1.squarespace.com/static/634d4558d6fbbb5280318717/t/6355438aff7b3464246a40ec/1666532234399/Raleway-ExtraBold.ttf); } @font-face { font-family: 'Raleway-ExtraBoldItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd6399b/1667037341548/Raleway-ExtraBoldItalic.ttf); } @font-face { font-family: 'Raleway-ExtraLight'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd6399d/1667037341584/Raleway-ExtraLight.ttf); } @font-face { font-family: 'Raleway-ExtraLightItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd6399f/1667037341614/Raleway-ExtraLightItalic.ttf); } @font-face { font-family: 'Raleway-Italic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639a2/1667037341652/Raleway-Italic.ttf); } @font-face { font-family: 'Raleway-Light'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639a4/1667037341684/Raleway-Light.ttf); } @font-face { font-family: 'Raleway-LightItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639bf/1667037341726/Raleway-LightItalic.ttf); } @font-face { font-family: 'Raleway-Medium'; src: url(https://static1.squarespace.com/static/634d4558d6fbbb5280318717/t/635543c10d38433db09d9865/1666532289805/Raleway-Medium.ttf); } @font-face { font-family: 'Raleway-MediumItalic'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639c3/1667037341802/Raleway-MediumItalic.ttf); } @font-face { font-family: 'Raleway-Regular'; src: url(https://static1.squarespace.com/static/634d4558d6fbbb5280318717/t/635543ce7c8ae732dae5b23c/1666532302795/Raleway-Regular.ttf); } @font-face { font-family: 'Raleway-SemiBold'; src: url(https://static1.squarespace.com/static/6364de5738b2f1610dd61b04/t/6364df2238b2f1610dd639c7/1667037341878/Raleway-SemiBold.ttf); } @font-face { font-family: 'Raleway-SemiBoldItalic'; src: url(https://static1.squarespace.com/static/6376481e39aacb26f720916f/t/6376492839aacb26f720d39b/1667037341906/Raleway-SemiBoldItalic.ttf); } @font-face { font-family: 'Raleway-Thin'; src: url(https://static1.squarespace.com/static/6376481e39aacb26f720916f/t/6376492839aacb26f720d39e/1667037341938/Raleway-Thin.ttf); } @font-face { font-family: 'Raleway-ThinITalic'; src: url(https://static1.squarespace.com/static/6376481e39aacb26f720916f/t/6376492839aacb26f720d3a0/1667037341972/Raleway-ThinItalic.ttf); } h1, h2, h3, h4 { font-family: 'Raleway-Bold' !important; text-transform: uppercase; } //__SITE-TITLE__// .header-title-text a { font-family: 'Raleway-Regular' !important; } //__SITE-NAVIGATION__// .header-nav-item a { font-family: 'Raleway-Regular' !important; text-transform: uppercase; font-size: clamp(12px,1vw,17px); } //__HEADER-BUTTON__// .header-actions-action .btn { font-family: 'Raleway-Bold' !important; font-size: 12px !important; } //__ANNOUNCMENT-BAR__// .sqs-announcement-bar-url a { font-family: 'Raleway-Regular' !important; } //__SMALL-TERTIARY-BUTTON__// .sqs-block-button-element--small, .sqs-button-element--tertiary { font-family: 'Raleway-Bold' !important; text-transform: uppercase !important; font-size: 15px !important; } //__MEDIUM-PRIMARY-BUTTON__// .sqs-block-button-element--medium, .sqs-button-element--primary { font-family: 'Raleway-Bold' !important; text-transform: uppercase !important; font-size: 15px !important; } //__SECONDARY-BUTTON__// .sqs-block-button-element--large, .sqs-button-element--secondary { font-family: 'Raleway-Bold' !important; text-transform: uppercase !important; font-size: 15px !important; } //__HEADINGS-FONT-TYPE-COLOR-AND-UPPERCASE__// h1, h2, h3, h4, h5 { font-family:'Raleway-Bold'; text-transform: uppercase; } sqsrte-large, p, sqsrte-small { font-family: 'Raleway-Regular'!important; } //__SPECIFIC_SECTION_PAGE-1_SEC-1__// section[data-section-id="6376488439aacb26f720ab68"] { } // CLAMP FUNCTION// h1, { font-size: clamp(33px,3vw,50px); position: relative; bottom: clamp(5px,1vw,5px)!important; width: clamp(70%,37vw,100%)!important; } //__PARAGRAPH-2_PARAGRAPH-BLOCK-SECTION-1__// #block-b92b581ebc4619e86bbf, p { font-size: clamp(16px,1vw,17px); position: relative; top: -5px; } //__PRIMARY-BUTTON__// .sqs-block-button-element--medium, .sqs-button-element--primary { font-size: clamp(12px,1vw,15px) !important; /*width: clamp(70%,20vw,100%)!important;*/ } //__PRIMARY-BUTTON-PAGE-1-SECTION-1__// #block-2df079361c5ddc29ff15 { font-size: clamp(10px,8vw,15px)!important; position: relative; bottom: 12px } // THIS IS MY MEDIA QUERY CODE// //_BAKGRUNDER_//----- // Medium devices (tablets, 3000px and up) @media (max-width: 3000px) { section[data-section-id="6376488439aacb26f720ab68"] { position: absolute; top: 108px !important; right: 0 !important; bottom: 0 !important; left: 0 !important; margin-bottom: 0 !important; } #block-2df079361c5ddc29ff15, #block-fb59ae81dfd30dce5f1c,#block-b92b581ebc4619e86bbf { position: relative; top: -108px !important; right: 0 !important; bottom: 0 !important; left: 0 !important; visibility:hidde; width: clamp(70%,40vw,90%)!important; margin-top: 20px; } #block-yui_3_17_2_1_1667555226387_6404144 { position: relative; top: -120px !important; } #block-yui_3_17_2_1_1667473268423_68801 { min-width: 100%; position:relative; top: 22px; left: -20px; } #block-b6393a5b817ff3360c63 { position: relative; bottom: -25px; } } //_BAKGRUNDER_//----- // Medium devices (tablets, 980px and up) @media (max-width: 980px) { h1 { width:100% !important; } section[data-section-id="6376488439aacb26f720ab68"] #block-fb59ae81dfd30dce5f1c { visibility:hidde; position: relative; top: -100px !important; left: -50px!important; width: clamp(60%,1vw,50%) !important; } #block-b92b581ebc4619e86bbf, { position: relative; top: -100px !important; left: -50px!important; width: clamp(90%,20vw,100%) !important; } p { font-size: clamp(13px,1vw, 14px) } #block-2df079361c5ddc29ff15 { position: relative; top: -100px !important; left: -50px!important; width: clamp(80%,1vw,100%) !important; } //_BAKGRUNDER_//----- // Medium devices (tablets, 900px and up) @media (max-width: 900px) { h1 { width:100% !important; } section[data-section-id="6376488439aacb26f720ab68"] #block-fb59ae81dfd30dce5f1c { visibility:hiddn!important; position: relative; top: 70px !important; left: -50px!important; width: clamp(70%,10vw,100%) !important; } #block-b92b581ebc4619e86bbf, { position: relative; top: 70px !important; left: -50px!important; width: clamp(100%,50vw,100%) !important; } p { font-size: clamp(13px,3vw, 14px) } #block-2df079361c5ddc29ff15 { position: relative; top: 60px !important; left: -50px!important; width: clamp(80%,40vw,90%) !important; } } //_BAKGRUNDER_//----- // Medium devices (tablets, 768px and up) @media (max-width: 767px) { h1 { width:100% !important; } section[data-section-id="6376488439aacb26f720ab68"] #block-fb59ae81dfd30dce5f1c { visibility:hidde!important; position: relative; top: 60px !important; left: 1px!important; width: clamp(80%,100vw,10%) !important; } #block-b92b581ebc4619e86bbf, { visibility:hidde!important; position: relative; top: -70px !important; left: 1px!important; width: clamp(80%,10vw,100%) !important; } p { font-size: clamp(15px,1vw, 14px) } #block-2df079361c5ddc29ff15 { position: relative; top: -115px !important; left: -1px!important; width: clamp(57%,1vw,57%) !important; } } //_BAKGRUNDER_//----- // Medium devices (tablets, 428px and up) @media (max-width: 428px) { h1 { width:100% !important; } section[data-section-id="6376488439aacb26f720ab68"] #block-fb59ae81dfd30dce5f1c { visibility:hidde!important; position: relative; top: 65px !important; left: 1px!important; width: clamp(95%,30vw,100%) !important; } #block-b92b581ebc4619e86bbf, { visibility:hidde!important; position: relative; top: -65px !important; left: 1px!important; width: clamp(95%,10vw,100%) !important; } p { font-size: clamp(13px,1vw, 14px) } #block-2df079361c5ddc29ff15 { position: relative; top: -115px !important; left: -1px!important; width: clamp(40%,50vw,90%) !important; } } a.summary-title-link { font-family: 'Raleway-Bold' !important; text-transform: uppercase; padding-bottom: 50px !important; } .summary-title { margin-bottom:30px !important; } .summary-excerpt.summary-excerpt-only p { line-height:1.7em !important; margin-top:20px !important; } a.summary-read-more-link { background-color: #164448 !important; color: white !important; padding:20px; border-radius:40px; max-width:50% !important; text-align: center !important; } .sqs-button-element--tertiary { font-size:25px !important; } .summary-thumbnail.img-wrapper.preFade .fadeIn { transition-duration: 5000s !important; transition-delay:10s !important; } header#header { background: #154448 !important; } /* Change dropdown menu background */ .header-nav-folder-content { background: #154448 !important; } .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 90px; position: absolute; bottom: 10%; left: 90%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { color: #000; padding: 12px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { color: #000; padding: 12px;} } What is your site url? 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
Lauren0235 Posted December 19, 2022 Share Posted December 19, 2022 Hi! I have added custom CCS coding to my website which is showing fine on the desktop version, however the mobile site is not displaying one of the fonts correctly. Do I need to add a separate code for the mobile site? Please help 🙂 The screenshot shows that the font has not uploaded correctly, however it is working fine on my desktop version of the site. Here is the coding I have used for the font on my website: @font-face {font-family:omnes;src:url(https://static1.squarespace.com/static/62fe7440954cb6330e0f0516/t/63209333724c9b0988d74c3e/1663079219544/Omnes.ttf)} p {font-family:omnes} p { font-weight: 400; letter-spacing: 0.1em;} Link to comment
tuanphan Posted December 20, 2022 Share Posted December 20, 2022 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
Lauren0235 Posted December 21, 2022 Share Posted December 21, 2022 www.laurenlee.yoga Thank you! Link to comment
tuanphan Posted December 22, 2022 Share Posted December 22, 2022 23 hours ago, Lauren0235 said: www.laurenlee.yoga Thank you! Can you check font file again? I accessed font file & it shows white page https://static1.squarespace.com/static/62fe7440954cb6330e0f0516/t/63209333724c9b0988d74c3e/1663079219544/Omnes.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
Lauren0235 Posted December 24, 2022 Share Posted December 24, 2022 The font should be uploaded correctly because it shows perfectly on my desktop version of the site...do I need a special coding for it to also show up on my mobile site? Link to comment
paul2009 Posted December 24, 2022 Share Posted December 24, 2022 On 12/19/2022 at 8:04 PM, Lauren0235 said: I have added custom CSS coding to my website which is showing fine on the desktop version, however the mobile site is not displaying one of the fonts correctly. The font should be uploaded correctly because it shows perfectly on my desktop version of the site. The issue is with the font file. As Tuan correctly said, the font file URL is not working. If you have installed the same font on your computer then it may appear to be working for you, but it will not be loading for visitors on desktop or mobile. I hope that helps. Did this help? Please give feedback by clicking an icon below ⬇️ About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
Lauren0235 Posted December 26, 2022 Share Posted December 26, 2022 Sorry I guess I don't understand what it means when a font file URL is not working. Is that something I can fix or maybe I need to re-install the font? I'm new to this so really appreciate the help, thank you in advance 🙂 Link to comment
paul2009 Posted December 26, 2022 Share Posted December 26, 2022 (edited) 16 hours ago, Lauren0235 said: Is that something I can fix or maybe I need to re-install the font? It looks like you didn't upload the font file to Squarespace correctly because the URL for the font file isn't showing us the font file. To solve this you can delete the uploaded file and then upload the correct file again. Once uploaded, you'll have a new URL to use. See the steps in Adding custom fonts to Squarespace. Edited December 27, 2022 by paul2009 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
Lauren0235 Posted December 26, 2022 Share Posted December 26, 2022 Amazing! Thank you so much for this clear response and all the help! Link to comment
atfirstblink Posted December 27, 2022 Share Posted December 27, 2022 (edited) Hi, I've added custom fonts to my site www.atfirstblink.com, I'm unable to get them to show up consistently across all devices and browsers. 1. The Index Gallery font on the homepage doesn't show up at all 2. The heading 1 and heading 2 fonts show up on my laptop's Mac chrome and safari browser but not on my iphone or ipad's Chrome and Safari browser 3. The heading 4 font Sackers script only shows on my laptop browsers again. I've loaded ttf, woff and woff2 files for the Carefree serif font as custom css. Can someone tell me how to fix the issue pls. Thanks. @tuanphan I see you have helped a lot of people with the same issue. Can you pls check my code below and tell me where I'm going wrong. Edited December 27, 2022 by atfirstblink Link to comment
atfirstblink Posted December 27, 2022 Share Posted December 27, 2022 // Fontkit @font-face { font-family: 'Carefree Serif'; src: url('CarefreeSerif-Italic.eot'); src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'), url('CarefreeSerif-Italic.woff2') format('woff2'), url('CarefreeSerif-Italic.woff') format('woff'), url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('CarefreeSerif-Regular.eot'); src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'), url('CarefreeSerif-Regular.woff2') format('woff2'), url('CarefreeSerif-Regular.woff') format('woff'), url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('CarefreeSerif-Extralight.eot'); src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'), url('CarefreeSerif-Extralight.woff2') format('woff2'), url('CarefreeSerif-Extralight.woff') format('woff'), url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('CarefreeSerif-ExtralightItalic.eot'); src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'), url('CarefreeSerif-ExtralightItalic.woff2') format('woff2'), url('CarefreeSerif-ExtralightItalic.woff') format('woff'), url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Sackers Italian Script Std'; src: url('SackersItalianScriptStd.eot'); src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'), url('SackersItalianScriptStd.woff2') format('woff2'), url('SackersItalianScriptStd.woff') format('woff'), url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } // Custom Fonts Implement: h1 {font-family: 'CarefreeSerif-Regular'!important; font-style: normal;} h2 {font-family: 'CarefreeSerif-Regular'!important; font-style: normal;} h1.BlogItem-title { font-size: 40px; font-family:'CarefreeSerif-Regular'!important; font-style: normal;} h2.Index-gallery-item-content-heading { font-family: 'Carefreeserif-extralight'!important; font-size: 65px; } h4 { color:#f6f3ef; font-family: SackersItalianScriptStd !important; font-style: normal; font-size:33px; letter-spacing: 0em; line-height: 0em; margin-bottom:10px; } // Link to comment
atfirstblink Posted December 28, 2022 Share Posted December 28, 2022 Hi Everyone, I am trying to use two custom fonts on my site www.atfirstblink.com and I've tried all possible codes and loading the font files as eot, woff and woff2 but they still dont show up consistently. They neither on my ipad or iphone in safari or chrome on both. Below is the code I'm using. If someone can pls check and tell me what I'm doing wrong as I've been trying to fix this issue since 2 days now. Thanks. // Fontkit @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot'); src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'), url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot'); src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'), url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot'); src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'), url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot'); src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'), url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Sackers Italian Script Std'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot'); src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'), url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } // Custom Fonts Implement: h1 {font-family: 'CarefreeSerif-Regular'!important; font-style: normal;} h2 {font-family: 'CarefreeSerif-Regular'!important; font-style: normal;} h1.BlogItem-title { font-size: 50px ; font-family:'CarefreeSerif-extralight'!important; font-style: normal;} h2.Index-gallery-item-content-heading { font-family: 'Carefreeserif-extralight'!important; font-size: 65px; } h4 { color:#f6f3ef; font-family: SackersItalianScriptStd !important; font-style: normal; font-size:33px; letter-spacing: 0em; line-height: 0em; margin-bottom:10px; } // Link to comment
atfirstblink Posted December 28, 2022 Share Posted December 28, 2022 I have the same issue. The custom fonts wont show up on my iphone and ipad's chrome and safari browsers. @tuanphan Can you pls help. / Fontkit @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot'); src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'), url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot'); src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'), url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot'); src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'), url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Carefree Serif'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot'); src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'), url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Sackers Italian Script Std'; src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot'); src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'), url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } // Custom Fonts Implement: h1, h2 {font-family: 'CarefreeSerif-Regular'!important; font-weight: normal; font-style: normal;} h1.BlogItem-title { font-size: 50px ; font-family:'CarefreeSerif-extralight'!important; font-weight: 200; font-style: normal;} h2.Index-gallery-item-content-heading { font-family: 'Carefreeserif-extralight'!important; font-size: 65px; font-weight: 200; font-style: normal; } h4 { color:#f6f3ef; font-family: SackersItalianScriptStd !important; font-weight: 500; font-style: normal; font-size:33px; letter-spacing: 0em; line-height: 0em; margin-bottom:10px; } // 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