AIW
Member-
Posts
8 -
Joined
-
Last visited
AIW's Achievements
-
wosu-cupece43 reacted to a post in a topic: Custom not appearing on mobile
-
Custom font not working on mobile, Squarespace 7.1
AIW replied to AIW's topic in Fonts, colors and images
oops! sorry we changed that navigation item. @tuanphanthe site is alliswellstudios.com We turned the custom font off so we could make the site live, but the issue persists. Any idea what's going on? Code was: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');} h1 {font-family: 'GTAmericaBold';} h2 {font-family: 'GTAmericaBold';} h3 {font-family: 'GTAmericaBold';} h4 {font-family: 'GTAmericaBold';} -
I tried using the font converter at transfonter.org and uploaded each file separately, but it still doesn't seem to be working at all, now on any browser. My font "GT America Bold" was originally an .otf file, but I converted it to other formats as recommended. Here's my code: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca443e0a9253d2e5ade2a/1680647235731/GTAmerica-Bold.eot')format('embedded-opentype');/* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4814b72d81ef77f491f/1680647297139/GTAmerica-Bold.woff2')format('woff2'),/* Super Modern Browsers */ url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4b6f479ec0d40f87bc6/1680647350772/GTAmerica-Bold.woff')format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4d8bc7bf42192b580dd/1680647384441/GTAmerica-Bold.ttf') format('truetype'),/* Safari, Android, iOS */ } h1, h2, h3, h4 { font-family: 'GTAmericaBold' !important;}
-
@MichalGrzymski I'm having the same issue -- my custom font isn't working on mobile devices. For your code to work, did you have to convert your font type to the different formats/ extensions (.woff2, .eot, etc) and upload each separately into your css custom files, or did you simply change the file extension as it was written in your css? I have an .otf font file, but I'm not sure if I need to convert it two multiple different file types (.tff, .woff2, etc) or if I can just change it to mimic your css, and swap the url with my own. @tuanphan you may be able to weigh in here too? My site is www.alliswellstudios.com Original code was: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');} h1, h2, h3, h4 { font-family: 'GTAmericaBold' !important;} I tried using the font converter at transfonter.org and uploaded each file separately, but it still doesn't seem to be working at all, now on any browser. My font "GT America Bold" was originally an .otf file, but I converted it to other formats as recommended. My updated (but still broken!) code: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca443e0a9253d2e5ade2a/1680647235731/GTAmerica-Bold.eot')format('embedded-opentype');/* IE9 Compat Modes */ src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4814b72d81ef77f491f/1680647297139/GTAmerica-Bold.woff2')format('woff2'),/* Super Modern Browsers */ url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4b6f479ec0d40f87bc6/1680647350772/GTAmerica-Bold.woff')format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4d8bc7bf42192b580dd/1680647384441/GTAmerica-Bold.ttf') format('truetype'),/* Safari, Android, iOS */ } h1, h2, h3, h4 { font-family: 'GTAmericaBold' !important;}
-
Hi @paul2009 I'm having a similar issue, but our css appears correct/ labels the font the same way in each occurrence. Any other ideas as to why our font may be appearing strangely on mobile devices? It looks correct on desktop browsers, and when we test with the mobile icon on a desktop. It's only when we're on an actual mobile device where the font changes, and a weird artifact happens where it looks like the font is layered 2-3 times. SITE: https://www.alliswellstudios.com/about CODE : @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');} h1 {font-family: 'GTAmericaBold';} h2 {font-family: 'GTAmericaBold';} h3 {font-family: 'GTAmericaBold';} h4 {font-family: 'GTAmericaBold';}
-
@xtrano88 can you share your css? We're having the same issue -- over here, and would prefer not to make our headings into paragraphs.
-
For some reason, our custom type, GT America Bold, reads normally when we test it on Squarespace's "mobile" setting on a desktop browser (chrome), but on our actual mobile devices, the GT America Bold is being replaced with some other random typeface that also contains some weird artifacts (it looks like it's being duplicated or tripled in its appearance, in some cases). Anyone have a solution here? Entering our site information and code below, for reference. Thank you! SITE: https://www.alliswellstudios.com/about CODE: @font-face { font-family: 'GTAmericaBold'; src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');} h1 {font-family: 'GTAmericaBold';} h2 {font-family: 'GTAmericaBold';} h3 {font-family: 'GTAmericaBold';} h4 {font-family: 'GTAmericaBold';}
-
Yes @tuanphan are you able to clarify the solution here? We're having the same problem. Our typeface, GT America Bold, looks normal when we test for mobile on chrome desktop, but an our actual mobile devices the font is breaking (being replaced by some other random typeface). In the solution code provided above, should I be replacing every instance of "MyWebFont" with our typeface name, 'GTAmericaBold' ? Website: https://www.alliswellstudios.com/
-
AIW reacted to a post in a topic: Custom Font Not Working on Mobile
-
I managed to create the hover animation I want for my blog side-by-side grid images, but rather than greyscale I'm trying to figure out how to use this filter I found from this SVG Gradient map tool. I adjusted this filter called "x-ray" -- so I know I need to replace my current filter "greyscale" to "x-ray" -- but where/ how do I insert this filter preset for x-ray? Site: https://www.alliswellstudios.com/news CURRENT CODE: // blog image rollover section.blog-image-wrapper{ transition: filter .2s ease-in-out; filter: grayscale(100%);} //transaction image block color: active section.blog-image-wrapper:hover { filter: grayscale(0%); } PRESET I'M TRYING TO FIGURE OUT HOW/ WHERE TO PLACE: <filter id="x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feColorMatrix type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0" in="SourceGraphic" result="colormatrix"/> <feComponentTransfer in="colormatrix" result="componentTransfer"> <feFuncR type="table" tableValues="1 0.42 0"/> <feFuncG type="table" tableValues="1 0.42 0"/> <feFuncB type="table" tableValues="1 0.92 1"/> <feFuncA type="table" tableValues="0 1"/> </feComponentTransfer> <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/> </filter>