Jump to content

How do I use a custom font via font-face?

Recommended Posts

Hi all,I have searched everywhere and tried for hours to get a custom font working on my Squarespace site, but Im obviously not smart enough :-) Hoping you kind people might be able to point me in the right direction. I simply wish to use Segoe UI throughout my site which is not a Google Font.

In the custom CSS section I have uploaded the font in an attempt to embed it in my site for it gets displayed for users that may not have this font installed.

The code within CSS I am using is below; but its either not right (as its not working) or I need add further code elsewhere.

Sincere thanks for any help in advance!


@font-face {
   font-family: 'SegoeUILight';
   src: url('http://static.squarespace.com/static/50abaaf7e4b09a617638422b/t/50d21b81e4b08b028a4868cf/1355946881950/segoe-ui-light.eot');
   src: local('Segoe UI Light'), local('Segoe UI Light'), url('http://static.squarespace.com/static/50abaaf7e4b09a617638422b/t/50d21b86e4b05f4ba8bed41f/1355946886233/segoe-ui-light.ttf') format('truetype');
}

Link to comment
  • Replies 12
  • Created
  • Last Reply

Your font-face code will probably work, but use this instead (Font Squirrel syntax):


@font-face {
   font-family: 'SegoeUILight';
   src: url('http://static.squarespace.com/static/50abaaf7e4b09a617638422b/t/50d21b81e4b08b028a4868cf/1355946881950/segoe-ui-light.eot?#iefix') format('embedded-opentype'), 
        url('http://static.squarespace.com/static/50abaaf7e4b09a617638422b/t/50d21b86e4b05f4ba8bed41f/1355946886233/segoe-ui-light.ttf')  format('truetype'),
}

Next, you'll need to specify the use of the font across your site e.g.


html {font-family: 'SegoeUILight', Arial, sans-serif; font-weight: normal;}

That should blanket your site with Segoe. If you want to only use it on certain parts, use

p, div {font..}

etc.

Link to comment

Hi Alex,

Thank you so much for the kind help.

I have entered the first code in the CSS section, and the second code in both the header section (under code injection) so it spans across the entire site. For good measure, I also added it to the header of each page too (under page settings).

Unfortunately the Segoe UI font still doesnt display. I have no doubt it is user error on my part, is there anything else I could do?

Thank you kindly once again for the assist!

Link to comment

Try adding this to an HTML block and see what happens:


<div style="font-family: 'SegoeUILight';">Sample Text Here</div>


My guess is that it could be an issue regarding the uploaded font files.

One other thing to try is to assign it a heading level. Like this, I think, in the custom CSS:


body h2, .sqs-layout .sqs-block.html-block, .sqs-layout .sqs-block.markdown-block {

font-family: 'SegoeUILight';

}

And then see what happens when you try to use:


<h2>Sample Text</h2>

Link to comment

Hi George,

Thanks indeed for the help here, I think we're getting close. Interesting behaviour from your help!

If I add a HTML block with the code above - it finally displays!!

But adding the h2 code in the custom CSS doesn't make Segoe appear for H2 headers still.

Happy to use div styles per page if thats whats needed (have about 8 pages in total on my site) - would you mind letting me know the code?

Thank you sincerely once again for the assist!

Link to comment

Hi George,

After a bit more playing with this, your code does all work! But it only works if I use HTML blocks, rather than say text blocks that I then select with H2.

As your code does work, any easy way to blanket the entire site or each page with the font, or do I have use to use HTML blocks for everything?

Link to comment

Ah, ok, here's the final thing to make it work with text blocks as well. Just add this:

, .sqs-layout .sqs-block.text-block

to the body h2 code in the CSS so it all looks like this:

body h2, .sqs-layout .sqs-block.html-block, .sqs-layout .sqs-block.markdown-block, .sqs-layout .sqs-block.text-block {

font-family: 'SegoeUILight';

}

Let me know how that works out.

Link to comment
  • 3 years later...
  • 5 months later...
  • 1 month later...
  • 2 months later...

Hey Everyone! we created a super in depth guide with pictures on how to do this plus a few bonus hacks.

Check it out here

Hi, my name is Forrest. I am a founding member of [Pareto Design][1]. Addicted to progress, designing better democracy with tech, & driving youth demand for electric vehicles http://goo.gl/hK1WGZ [1]: http://pareto-design.com

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.