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

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');
}

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.

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!

All of this code goes in the Custom CSS section. You might want to try:

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

Hi Alex - thanks once again for the fantastic help.

Unfortunately it still refuses to use Segoe on my site, continues to use Arial. I have entered the code in the order you mentioned above, all in the custom CSS section.

Should it be important, the template in use is Peak.

Is there anything else I could try?

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>

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!

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?

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.

@Petri PottonenThank you for your video tutorial. I had been struggling with how to get icons to display in my implementation of lightGallery, and this solved it after about 15 hours of bashing my head against the keyboard.

Quick note: Make sure to use the correct callouts for the particular text in your site you’re trying to modify (p, h1, etc.), as custom fonts won't appear within the drop-down menus of your Style Editor.

Hello,My name is miss laura, i saw your profile and it drew my attention to write to you. I would like you to communicate me through my e-mail address(sgt.lauraralph2@gmail.com)laura

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