Embedding fonts in a Foundation site

Classic General
1

I have a client who wants me to use a font that is not found on Google Fonts. What do you all recommend for embedding other fonts into a Foundation website? Is it better to purchase and embed the font file directly, or use a service like Typekit?

Are there any instructions out there for embedding fonts with Foundation?

Thanks in advance! :slight_smile:

2

So far I’ve been using this:

works well for me…

1 Like
3

Joe just released a Font Pro stack. It is pricey (and I’m not a font guru by any means) but it’s billed as a premier font solution (and Foundation optimized, obviously)

1 Like
4

@jabostick That one looks really nice!

6

I don’t know how font rendering works in browsers but you could maybe try using a Preloader (and maybe have that process taken care of out of sight of the user)? I know @bon might give me a lifetime ban for suggesting that but I’m reckless and edgy like that

7

Fonts should load pretty quickly. If you look here at http://www.webdeersign.com/templates/tp2demo1/ there about 5 different Google Fonts being used and I don’t see any delay. I am using 900 weight fonts which are the ones that can take longer sometimes. You would be hard pressed to know they are Google Fonts. Also note that this is just a blank theme, i.e no foundation and no pre-loader is used.

8

OK, it is official!

9

Thanks for the suggestions everyone!

10

What you’re describing is known as a “Flash of un-styled text” or FOUT as developers call it. Google it for more info :slight_smile:

How to avoid it / stop it from happening? Well you can’t, at least not on the first page load, as the browser has to download the font file(s) to be able to use. Until it’s downloaded them, it can’t display them.

Think of fonts as the same as images, you can’t show an image to a user until it’s been downloaded. Same thing for fonts.

There are a few different techniques on how to deal with FOUT, and it depends on how you’re loading the fonts on to the page, but they can be a bit tricky to implement if you’re not a developer (not sure how comfortable you are with code!).

If you’re not a coder, I’d suggest checking out Joe’s Font Pro stacks, as it’ll handle most things for you!

Let me just find that “Lifetime ban” button, I know it’s here somewhere… :stuck_out_tongue_winking_eye:

1 Like
11

Hi all,

as @Basswow mentioned, CustomFont Stack allows font settings in Foundation or Total / Easy CMS (also site titles and menus). Of course not as integrated as Font Pro Stack from Joe, but only for 1/3 of the price.

CustomFont Stack supports:

I am working on a version update for easier configuration and improved documentation & tutorials currently.

Cheers, Jannis

2 Likes
12

Thanks everyone! I bought Font Pro and am loving it so far!

13

Hi all,
I’m looking at Joe Workman’s FontPro stack and am not sure if it does what I think it does??

Can someone help please as it’s quite an expensive stack, so just before I buy I want to check some things.

I have watched the tutorial and read the documents but I still have some questions;

I’m trying out Foundation so there are no set fonts and and I want to change the standard font from what is currently being used. I have only used themes in the past and this is my first foray into a non-themed site. Lots of great things but I am so confused about how to set up a font for my site. I have Typography stack and also BWD’s Header Pro and Paragraph Pro which are great but now I want to change font within some other stacks that don’t offer font style choice. Obviously designed to be used within a theme and justing using the theme font, such as Stacks4Stacks CutOut and BetterFloat stacks.

  1. So does the FontPro stack work with any other stack? For example in a Float or Stacks4Stacks BetterFloat and their CutOut Stack would it work by changing the text within any stack? And how would that work, for example CutOut Stack doesn’t have options for selecting a font.

  2. Do I need to have the FontPro within each stack that I wish to have a particular font style or only once on each page or just once in each project?

  3. Does it work with the RW Header and DooBox HeaderX Stacks?

  4. Will it work within ExtraContent areas?

I’m just a little unclear if it works with every stack or just some?

Once again, thanks for all your help and advise…this forum rocks!!

Scott

14
  1. Font Pro can target other stacks. It includes a stack called Font Box that will do the job most of the time. If that does not work, you may need to do a tad of CSS in order to find the correct “selector” in order to apply the styles. If that scares you, there are tons of people on this forum or on mine that can help with that.
  2. You only define Font Pro one time at the top of your page.
  3. It can work with any stack.
  4. It will work on anything on the page, even EC areas.
15

Thanks Joe, a big help.

I’m very interested in Foundation and its flexibility but I have spent a lot of money over the years with nearly 100 stacks in my library plus lots of themes too. But as I’ve got more confident with my skills I’m wanting to try something that gives me more flexibility.

So a couple of questions.

  1. Do all stacks work within Foundation too or only the Foundation stacks that you sell?
  2. The other plugins like RapidCart Pro or FormLoom do they work with Foundation?

Thanks for your help.

Cheers Scott

16

You can use any stack in Foundation. It’s as compatible with Stacks as any other theme.

I’m sure that plugins like Rapidcart Pro and Formloom also work fine.

Rob

17

Thanks Rob, you’re a gem mate.
Are you every off this forum…you seem to answer more questions that anyone!!
Cheers Scott

18

Plugins that offer stacks to import the content into stacks pages works with Foundation really well.

19

@garth You might also want to look at Gutenberg https://barth-partners.com/pub/it/stacks/gutenberg/
This also allows you to use all types of Font Files. Supposedly WOOF font files are the thing. If you have any font file a ttf for example you can upload that in FONT SQUIRREL and then download a set of all types for that font.

20

@kpryce1

I might be talking rubbish, of course, but I do believe you are referring to WOFF font files. I’d hate for the recipient to end up barking up the wrong tree. Ahem.

2 Likes
21

@klaatu I stand corrected - WOOF WOOF.

1 Like