Fonts and the GDPR

@instacks custom font stack is quite handy too for importing different fonts into your project. inStacks Software | CustomFont Stack - Use your own or custom fonts in RapidWeaver

You can assign the fonts you bring in to Foundry’s Typeface by adding a custom css class (i.e. ‘foundry-typeface-one’)

3 Likes

I forgot all about the inStacks font stack. Good suggestion.

1 Like

Lets not forget FontAwesome that may be affected by GDPR. Yet another good reason to store SVG versions of FA5 (free) locally.

1 Like

Thank you :slight_smile: @elixirgraphics Can I just use a font on my webserver (or in my ressources) and add this one in the Foundry control stack at CUSTOM in the font setting, without using the type face stack? Which address should I use in this case, looking at webdeers example: url(’%resource(MuseoSlab-500.woff)%’) or else?

Thanks again

Jan

And if I am using typeface:

I have my Font, lets say, lato300. I have added this font to my ressources.

a) I assign it to Typeface1. The normal weight is 300, this is the font I downloaded.
b) Now I want to set the BOLD weight for this Typeface1. But I only use one font name in this Typeface.

How can I tell Typeface 1 which font to use for the BOLD weight? Can I add more than one font name to the Font name field?

Thanks!

Jan

In accordance with Adam, I added the Foundry Typeface CSS classes to CustomFont Stack. Click on the image below to see the dropdown :wink:

You are now able to use local font files inside Foundry without adding CSS by yourself, see a demo here:
http://fontdemo.instacks.com/foundry/

4 Likes

The link to the foundry demo does not work…

Works again, DNS problems with 1und1 :wink:

2 Likes

Thanks. Now I have the Font Lato in 300 and 700 weights. Also 300 italic and 700 italic. Each of them in all 4 formats. How do I set this up? All in one Font folder with subfolders? Have you got a description or an example for this setup using Foundry? Sorry for the dumb questions…

Makes sense to put them all in 1 folder,

Having 300 & 700 italic and normal is a lot of fonts, i.e. 4, to load up. Font files can sometimes be 100’s of k large. It would be worth checking the size of the fonts and deciding if you really need them all.

But will they be displayed in italic if I do not include them?

The demo project contains a Foundry page.

https://instacks.com/customfontstack/tutorial/

I will update the tutorial in the next days.

2 Likes

Great, of course I bought already but I be happy for the tutorial! Thank you

@Fuellemann – Sorry to take some time coming back to this, I just got back in from my trip.

Can I just use a font on my webserver (or in my ressources) and add this one in the Foundry control stack at CUSTOM in the font setting, without using the type face stack?

You could yes, but I would encourage you to steer clear of the Custom setting. That will eventually be going away because Typeface is a much better implementation that can be more easily applied throughout the site.

Which address should I use in this case, looking at webdeers example: url(’%resource(MuseoSlab-500.woff)%’) or else?

That would be up to how you’re uploading your fonts. If you’re using the resources, you’d use the resource variable, if not you’d use your own URL. This will be for you to figure out depending on your course.

b) Now I want to set the BOLD weight for this Typeface1. But I only use one font name in this Typeface.

This is a downside for using the stack in a way it is not intended to be used. You would have to use two Typeface slots in this case.

Again, all of this is using the stack for a purpose it is not designed for.

You can use a normal font and italicize it or bold it, but you will be only be faux italicizing or bolding the font. Meaning for instance that if you were to italicize the font and not include the italic version of the font on the page, the browser will simply skew the text. It will not be quite as good looking. If you’re using an italic setting in your text you should most times load the italic version of the font, this is what they’re designed for.

As @webdeersign points out, loading several fonts on one page can add up fast. It is a balancing act to be sure.

2 Likes

Hi Adam, Typeface did the trick. Just to be sure. If I am using one of the default fonts you provide:

27

These fonts will be downloaded from Google Webfonts? Or do you assume these fonts are installed on a computer anyway and being used?

And If I provide my own fonts via Typeface, no fonts will be pulled from Google webfonts? If the browser does not support my font, a font from the visitor’s computer will be used?

Thanks and sorry for these question :slight_smile: ,

Jan

I hope @Fuellemann doesn’t mind, but I moved the above post from a conversation he and I were having to this thread as I thought it fit here well and might answer questions others might have.

Fonts listed there like Lucida Sans, Times New Roman, etc. are web safe fonts. They’re generally included on most machines and provided by the visitor’s OS. Some of those are more common on a Mac or a Windows machine, but all have fallbacks. These fonts are not provided by a CDN.

Correct. They will be pulled from wherever you have placed them and link to them from.

The font will fallback to whatever you’ve set as your fallback font. You should choose a web safe font and / or a generic font definition like serif or sans-serif.

Again, all of this is outside of what Typeface is setup for, so it is going to be more work than it should be.

2 Likes

Does the CustomFontStack need to be applied to every page, or every paragraph?

Only once per page, once per TypeFace definition.

You can create partials out of it also.

As Janis says it is worth adding to a partial. In fact the best bet is to add this and the foundry base stack into a one column stack and then making a partial out of that.

1 Like

Yeah, I use a partial for all of that and the menu. Still a work in progress … Guess I have to purchase. Didn’t know of the GDPR and of google transmitting the IP of the user when loading google fonts.