Fonts and the GDPR

Foundry
1

Hi, looking at the current debate about the GDPR, it seems we are not allowed to use Google Fonts in the current form any longer. By using Google fonts, we transmit the IP address of the website visitor to Google. The IP address is a personal data and thus not allowed to be transmitted without consent.

BUT we are allowed to host the google fonts on our servers and to load them from there.

Question: How can I achieve this using Foundry? I know how to host the fonts on my server, but we do need the option within Foundry to select them there.

I know this is a hassle. But on the other hand, the fines are quite serious for not following the rules. So I hope Adam can help us here…?

2

You can do this using the Foundry Typeface stack.

3

Actually no. There is no option in the Typeface stack to point it to a place on my own server, just to select Google. Then the font is again pulled from Google and the IP address transmitted…

4

There is but it is not obvious. I am not at my Mac at the moment but recall that I posted on here showing you could use a local font.

if you are doing a lot of sites it would be well worth getting FontPro and then load them as base64 from your server which is far better way of doing it. You can then use Typeface to point to the FontPro fonts or just use FontPro.

1 Like
5
1 Like
6

Thanks. If you have the time in the coming days - would you send me an example on how you added a custom google font to your site by hosting it on your server? So how did you download the font, how did you save it, did you need different formats of the font and which code you added at what location within RW?

I’ll owe you a famous german beer anytime you are around :slight_smile:

7

Google Fonts are loaded through their CDN. This is to improve load times as well as ease of use. The stack uses their standard CDN calls to load the font.

There is not a feature in Foundry that specifically allows you to host the fonts on your own server. It could be done by defining the font yourself on your pages using your own custom CSS by creating an @font-face definition. You could then use the “Standard Font” option to reference it and add a fallback font, and whatnot. I know the first thing @webdeersign will point out is that I could add fields for the required fonts and allow the user to insert the web addresses of the various font types in those locations. This can lead to some problems though, so that isn’t a route I want to go at this time… letting the user insert URLs for these manually is a bit more risky than say an image URL because you won’t immediately catch possible errors right away because they’re not always as glaring as a missing image.

I’ve put in a feature request to @Isaiah for Stacks that would help me to implement what you’re wanting to do without needing to rely on the Foundry end user to upload and maintain font links and whatnot. If that API feature request comes through I would be glad to add in such a feature for Typeface, as well as add some other features in some of the other Foundry stacks.

TL;DR: Right now what you’re wanting to do isn’t something directly supported by the stack, but could be achieved by adding in your own @font-face definitions to the Custom CSS field and referencing that font in Typeface using the “Standard Font” option.

2 Likes
8

Perfect, so I will use the @font-face together with the Typeface stack - and I hope either Webdeersign or Steve_J can send me an example set up :slight_smile:

9

In Google fonts, once you select a font you have the option to download it.

10

@Fuellemann – You should check this link out from CSS-Tricks.

You’d then use the font name you define there in the Standard Font section of Typeface. Don’t forget you have to load each weight of font you want to use, too.

1 Like
11

This is something I posted in the past when I was trying to fugue out how to use Typeface:

"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/3 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?"

Don’t know why I used resources for this but I would just use a direct web font URL instead.

3 Likes
12

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

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

1 Like
14

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

1 Like
15

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

16

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

17

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/

2018-03-19_10-34-20
2018-03-19_10-34-20330×711 72.2 KB

4 Likes
18

The link to the foundry demo does not work…

19

Works again, DNS problems with 1und1 :wink:

2 Likes
20

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…