mikemobley Posted February 18, 2020 Share Posted February 18, 2020 Site URL: https://www.austinlifechurch.com Does anyone know how to apply the small caps styling to any font? For example, how using CSS could we say something like this: -Have site title logo font (which is adobe garamond pro) have small caps style applied to it? Then maybe an example for header 1 or header 2 or body? Link to comment
paul2009 Posted February 19, 2020 Share Posted February 19, 2020 There isn't a Site Styles tweak for this, so you need to add some CSS to Design > Custom CSS. Your site logo appears to be an image rather than text, but here's an example to affect the H1 titles: h1 { font-variant: small-caps; } You can make it affect other areas by replacing h1 with the correct selector. You could also add other selectors separated by commas to affect more than one area, for example, "h1, h2, h3". About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
mikemobley Posted February 19, 2020 Author Share Posted February 19, 2020 5 hours ago, paul2009 said: There isn't a Site Styles tweak for this, so you need to add some CSS to Design > Custom CSS. Your site logo appears to be an image rather than text, but here's an example to affect the H1 titles: h1 { font-variant: small-caps; } You can make it affect other areas by replacing h1 with the correct selector. You could also add other selectors separated by commas to affect more than one area, for example, "h1, h2, h3". Ok great thank you. So how then besides h1 would I be able to reference other areas like site title or navigation, etc. ? Link to comment
paul2009 Posted February 19, 2020 Share Posted February 19, 2020 If you want to identify other selectors, you may find these articles helpful. They are a few years old but should still be relevant. Finding CSS ID and Class Selectors Using CSS on Squarespace About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
mikemobley Posted February 20, 2020 Author Share Posted February 20, 2020 Got it, thank you! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.