Squarespace makes it super easy to see how your website will look on smaller screen sizes. ![]() This post will show you some of the updates you can make so the mobile experience is even better for your visitors. Squarespace templates are set up to be mobile responsive by default, so they will generally look ok on mobile, but there are still a few things you can do to make sure your website just as amazing on mobile as it is on your computer. We all know how frustrating those websites can be! Also, spacing out links and buttons so they are easily clickable with your finger, and making sure your website is as speedy as possible will help keep people hanging around. So, what makes a website mobile friendly? One of the most notable features of a mobile friendly website is that the text can be read easily without having to pinch and zoom or rotate your screen. This means that no only is the user experience on your website impacted, but you could lose out on the amount of traffic you get from Google searches. Not only do a huge amount of people view websites from their phone, but Google will penalize your website if it is not mobile friendly by reducing the number of searches your website appears in. If you do this method though, you will have to use it within a Code Block (not just a regular Text Block, since you won’t find a Header 4/5 option there.)Īdd your Code Block wherever you want to use your new font (just click to add a regular block and choose “code”).Have you ever visited one of your favourite websites on your phone only to find it’s not very user friendly on the smaller screen? I know I sure have! These days over half of all website views are from mobile phones, so it’s more important than ever to have your website looking great and functioning well on smaller screen sizes. Squarespace doesn't automatically have an h4/h5 (heading 4 or heading 5 depending on which version) option built-in, so this means you are actually creating a whole new header option. If you don't want to add it as a main heading font/replace a current heading font but you still want to use it throughout your site, the easiest thing to do is replace the h1 tag with an h4 tag (if you’re in Squarespace 7.0) or h5 (if you’re in Squarespace 7.1). P.sqsrte-small = Paragraph 3 / Small Paragraph - only available on Squarespace 7.1 P.sqsrte-large = Paragraph 1 / Large Paragraph - only available on Squarespace 7.1 H4 = Heading 4 - only available on Squarespace 7.1 Which selectors to use for different fonts: All of the settings will still work, but the font will be different! If you want to change things like letter spacing and font size, you can actually still do this within the Style Settings, just head down to Heading 1 (or whichever heading you have used) and edit them from there. ![]() It's seriously that simple! See below for a list of all of the varents. You can also change the h1 to h2, h3 or P (heading 1, heading 2, heading 3 or Paragraph/Body text). This tutorial is for Squarespace 7.0 and 7.1!īy pasting that code into your Custom CSS box, this will change your H1 (Heading 1) to your custom font.Ĭurrently your Heading 1 has been set in your built-in Style Settings, but this code will actually overwrite your Style Settings with your custom font.Īnd of course, remember to change the “font-name” to the same as the font name you added in the last code. ![]() If you've purchased a font from Creative Market, you'll be able to see if it's licensed for web use on the product page, otherwise, just flick the seller a message and ask! Better to be safe than sorry (aka, fined!) If you can't find the details, just go ahead and email the font creator and ask if you have the correct license. You need to make sure you have the correct licensing on your font so that you are legally able to use it on your website. Don't freak! It's basically just a copy and paste method, and it's super easy. This tutorial involves a little bit of coding. I think we all realize there's a pretty clear winner here, so, let's get to it! Upload your brand font directly to your Squarespace site and set it to be your Headings or Paragraph text and use it easily and whenever you like. ![]() Let's be real, Squarespace has a huge selection of awesome free fonts available for you to use on you website, and we love them for that.īut do they have that gorgeous font you downloaded from Creative Market and used throughout all your branding and social media graphics? Chances are, nope!ĭon't use your brand font on your website, go with something similar, how important is branding consistency anyway?Ĭreate graphics of words in your chosen font then upload it as an image every time you want to use it anywhere, it shouldn't be too annoying to update later on, right?
0 Comments
Leave a Reply. |