Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
gibbo_ireland

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

Question

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

Edited by gibbo_ireland

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0

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.

Share this post


Link to post
  • 2

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0
Guest

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>

Edited by Guest

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0
Guest

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.

Share this post


Link to post
  • 0

@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.


Raise Capital Faster: Reaching More Investors with the Power of Technology

Share this post


Link to post
  • 0

No problem!


I'm a professional Squarespace developer / designer. I design sites and help folks with problems big and small. Available for freelancer work at [petripottonen.com][1] [1]: http://petripottonen.com

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...