Foundry - Different Custom Fonts on Single Page

Hi all!

I am building a single page site and would like to use different custom google fonts on the page in different sections. I changed the Headers font in the Foundry control page as well as the base font to my custom google font setting, but is there a way to have a section on the page with a different custom font? I tried adding another Foundry control page but that didn’t work.

Thanks, Mike

Hi there Mike!

That isn’t a feature of Foundry at this time. I tried to limit the number of Google Fonts being loaded on one page as too many can impact your page load time.

I use Font Pro by Joe Workman in my foundry projects. It’s pretty straightforward and a good value. Also, there’s a lot of control so that you can target different elements and sections on your page for different fonts. It can be a bit of work to figure out initially, but I haven’t found a need that it couldn’t meet.

3 Likes

You can also use Header Pro and Paragraph Pro from BigWhiteDuck. They are free/donationware so if you use them please donate a couple of cups of coffee to ol’ Tav :slight_smile:

4 Likes

Thanks everyone for the ideas! I can certainly understand how easy it is to get carried away with too many fonts which bog down page load speeds. However, I need to balance that with not wanting the same header font used everywhere so I will probably have to get one of those stacks just to give some flexibility in font formatting.

I hadn’t even heard of BigWhiteDuck but when I checked out their stacks they looked great so I will have to try them out as well, great suggestion!

1 Like

Chet,

Can Font Pro be used with Foundry stacks? Font Pro seems to use vaults while foundry uses typefaces. I am trying with no joy to use them together. I must be missing something.

No need to use FontPro with Foundry. Yes you could use FontPro with Foundry but there is now excellent font support built into Foundry with the recent v1.25 big update. Foundry now has inbuilt support for fonts with the new Foundry Typeface stack and the selection of fonts can now be done throughout Foundry which is not the case with FontPro which as you found out, uses Vaults.

To use a web font you would normally add a folder containing the web fonts to your server, or you can do this via Resources in RW7. See https://css-tricks.com/snippets/css/using-font-face/ to understand what you need in terms of web fonts. Just the Woff file may be enough.

For example, if you are using a font such as MuseoSlab-500, then you would drag the file MuseoSlab-500.woff into resources

You then need to add the following into the page wide CSS in the RW Settings - Code CSS section:

@font-face { font-family: 'museo'; src: url('%resource(MuseoSlab-500.woff)%') format('woff'); }

Then you could allocate the Typeface1 using the Fontface Foundry stack to use museo.

That’s all you need to do. How easy is that?

You just need to use the Font Box stack that comes with FontPro, this will apply the correct class names that the Font Vaults use.

The problem with this is that you are not dealing with bold, italic and bold italic typefaces. This will result in portions of the text being synthetically rendered by the browser while the normal typeface is not. Incidentally, this is also the problem with copying the CSS provided by services such as Font Squirrel. They tend to use different font-family names for the different variants and there is no way to apply them in the RW environment (without adding spans and class names into your paragraph text).

FontPro and Foundry define the alternate weights to be used on bold (<strong>) etc within the same family name and target the various elements on the page directly.

I wasn’t as clear as I should have been.

You are correct, but my instructions were in relation to setting up web fonts to use in Foundry, to use the Foundry Typeface stack, which are by coincidence, the same instructions as not using the Typeface stack. The missing piece of the Foundry web font puzzle is the font-face definition which has to be done by hand.

I have been doing a bit of font testing with Foundry and so far everything is all good. Bold & italic also looking fine so far. It doesn’t have all of the features of FontPro but for most it a good balance of ease of setup and use and of course comes free with Foundry.

If the person already has Font Pro, like it sure seems like he does, then we should try to help him getting it working with Foundry.

Yes but my point is that you need 2 @font-face declarations not one, each with the same family name but with different weights and different filenames to load the normal and bold font. There is no way to load a bold-italic variant at all using this method so far as I can tell.

With only one WOFF loaded then you will by definition get faux rendering on any bold or italic text.

I know that I am anal about typography but unless it is done correctly then I think using Google Fonts is a better solution for most people as this is all handled by their CDN service.

Because the Foundry Typeface is now baked into Foundry so you can, for example, access a specific font such as Typeface9 from within the Foundry stacks that use text such as the Card elements. This can’t be done through the FontPro Vaults.

It absolutely can be done, in various ways either using the Apply To settings in the font family stack or by simply dropping it in a Font Box stack assigned to the vault. This strikes me as less complicated than entering your own custom font-face css and has the benefit that all variants are correctly rendered including italic and bold italic.

Good point but you are indeed anal about typography (still) and part of the disappearing breed of Typography Evangelists . I am at peace with faux rendering and can’t remember the last time I used Bold or Italic fonts and I certainly never declared them in FontPro. My best fonts don’t even have Italic versions, anyway.

Also I agree that Google Fonts are now so good that it doesn’t make much sense to not use them for body text - unless you want something horrific.

Just saw your reply that Font Vaults can be used. I didn’t know that and have been using FontPro longer than most. My mistake.

What an awful state to be in - I think there is medication available for such conditions.

My grandfather used to say “If a job is worth doing it is worth doing right”. He never said “do half a job” or “do a job on the cheap” and he certainly never said "have some of your typography bitmapped after going to the trouble of loading 10’s of kb of vector font files. :slight_smile:

2 Likes