Include fonts locally to a project (related to GDPR)

Hello,

I was trying to find some ideas about how to include fonts locally on the webserver. Right now I only see the option to include google fonts which will be loaded externally from the google servers. Since May 25th, the new GDPR come into force. This brings a lot of changes to some technical things. One of this is that fonts should not be loaded externally, but locally (because if you load it externally your IP will be sent through). Even this new law is really a mess, we have to deal with it, even in the European Union.

My question: When will it be possible to include fonts locally in Bootstap Studio?

As a workaround I could also include it with a CSS file, but the problem is, that I can not simply insert any external CSS (e. g. from google) to the Bootstrap Editor. Like this one:

    /* montserrat-100 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('/assets/fonts/montserrat-v12-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
       url('/assets/fonts/montserrat-v12-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/montserrat-v12-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/montserrat-v12-latin-100.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/montserrat-v12-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/montserrat-v12-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
}

Copy and Paste is not possible: screenshot copy/paste from google

So is there any easy way, except to include the font after exporting the project? Because if so, the design is not really nice while programming the webpages, because the font is missing and I have to use any other font meanwhile.

Thanks, Enrico

I'm sorry if I had miss-stated how you go about doing this, I'm aware that I had said previously in other posts to create and paste in your font code. Doesn't actually work like that in app. What you actually have to do is link to an external CSS in the app rather then create or import. You have to link to external CSS file that contains your Font Face coding.

In the Font Face coding you have to use Absolute URLs so that the app can pull in the font files to render in app.

The following does work in the app as I have tested my own font test in app.

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('http://www.mywebsite.com/assets/fonts/montserrat-v12-latin-100.eot');
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
       url('http://www.mywebsite.com/assets/fonts/montserrat-v12-latin-100.eot?#iefix') format('embedded-opentype'),
       url('http://www.mywebsite.com/assets/fonts/montserrat-v12-latin-100.woff2') format('woff2'),
       url('http://www.mywebsite.com/assets/fonts/montserrat-v12-latin-100.woff') format('woff'),
       url('http://www.mywebsite.com/assets/fonts/montserrat-v12-latin-100.ttf') format('truetype'),
       url('http://www.mywebsite.com/assets/fonts/montserrat-v12-latin-100.svg#Montserrat') format('svg');
}

You create a CSS file with your font-face coding in it with the correct Absolute URLs and upload it to your host along with the Font files. Then in the app you right click on the Style menu in the Design pane (bottom/right) and select Link External CSS. Put in the URL of the font.css file. Then you can use the font in your app's project like you would normally.

h1 {
  font-family: Montserrat;
}

I have tested this method out myself with my own font setup and the font loaded in app.

Saj

Thank you for starting this thread, @enricob. This is a common misconception regarding the GDPR. You don't have to make technical changes like this. It is enough to include a paragraph similar to the one below in your privacy policy:

"For our legitimate interest in providing our services efficiently, some of our static assets (including images, libraries, fonts and other static resources) are hosted on third party services (CDNs). These services include Google Fonts and Cloudflare. You can check their respective privacy policies for the data they collect."

If you wish, you can link the name of the services to their privacy policies to make it easier for users.

@Saj: Thanks for your advice, I'll try this in my current project.

@Martin: Unfortunately not. There are already adhortatory letters regarding the external usage of google fonts. But there is no official adjudgment yet. To be safe, I'll not include external fonts from Google anymore. The statement which you have mentioned is well known, but not enough, because the user can not decide whether the font will be loaded or not before visiting the homepage... Thats the problem and this includes also external usage of js files or whatever. Total mess.

Regarding Google Fonts & GDPR: In Germany websites are already getting their first letters from lawyers concerning this. (with a big, fat bill, too)

Regarding the process of adding external fonts to bootstrap studio: Please correct me if I misunderstood, but after reading through the complicated process getting external fonts to work in the App, this is for me a big killer. I design sites for customers, and often don't have any access to their servers until the project is finished. Of course I could set up the whole thing on my own server. Then after everything is finished, I have to go through the same process again, this time setting up the fonts to work on the customers server.

@gary: There should be nothing extra that you need to do to set anything up on your customer's server after using your own server for testing and temp viewing etc. I have been doing that for years and as long as you set the links up correctly (without using the server's address in them at all, i.e. relative links) you can just upload it and all should work. You shouldn't need to change anything at all for CDN's as they are pointing to another server no matter where you have uploaded the code.

Note: As a work around for some of my clients that are utilizing some external elements such as WowSlider I have made sure that all of the links to the photos and files used are relative links and the files are all uploaded. This just means I won't see these items in the previews at all, but all will work (if correctly set up) once the files are uploaded to the server (either one). Here also nothing extra is needed to be done after you have finished the site and are moving it to the client's server.

Hope that helps. :)

@Jo: thanks for answering! I was taking reference to the comment from @Saj: "In the Font Face coding you have to use Absolute URLs so that the app can pull in the font files to render in app."

Remember: I want to be able to see and select the fonts in the Font Tab in the Look & Feel Pane at the right of the editor, so I guess that's why Saj suggested using absolute paths? Or am I way off the track, here?? If I can't use the editors built-in easy editing features like Font Family, etc. that would be sad.

I’m not plugging any other product, but “Blocs” let’s you add external fonts super easy. I like the UI and functionality of Bootstrap Studio way better, though so I would like to keep working in BSS!

It appears that the Look & Feel does not understand the contents of your imported CSS file for the Font Family property of the tool.

Saj

Hi Saj, I haven't tried setting this up so far. Before I make a mistake I wanted to be clear about the process. You suggest using absolute paths, whereas Jo suggests using relative paths. Which method will enable me to use the font styling feature sin BSS?

You have to use the absolute URL if you are using a CDN for a font or any other file. If you are creating that CDN yourself, the best way to do that is to put it on the client's server right away and use it straight from there. Then there's nothing to change when you move the site from the test location to the client's location.

My comments about using relative links are for files and images and such that are not within a CDN, things you cannot upload like PDF files too. Those are the items I was saying will not work or be viewable in the Preview, but will work fine when uploaded to your test server or the client's server as long as the files they reference are in those locations. Once again this means nothing needs to change in the code and the only extra work this causes is to upload the files in 2 locations for those elements.

My practice is usually to get something working correctly and document what I did in some notes (for things I know I will need again often that is). Then after that I don't bother to test it all again for each project since I know it works, I don't worry about it until after I've uploaded it all to the test server where I'll know if it's working or not.

Hope that's clearer and helps!

Thanks Jo, for taking the time to get back to me!

So to sum it up, if I want to be able to use my own fonts AND be able to select them on the Font Styling menu in BBS, I will have to use the absolute path method.

It is not always possible to know in advance where things will reside on a customers server. We always develop on our own server, and then transfer everything to the customers server/provider when the website is completely finished.

So I guess I'll have to bite the bullet and just accept that at this point, using my own fonts has to be done manually: 1. Add fonts using absolute path to our staging server & design the site 2. hand edit the code and change the paths again before uploading to the customers server.

Did I understand correctly?

Thanks again for everybody's help! Gary

You will need to use Absolute paths because your font does not exist in the App. It's the only way for the Font to load into the App for use.

The Look & Feel panel will not make "selectable" an externally linked CSS files Font-Family. However, you can TYPE in the Font name in the box for it to work. You just can't select it from the dropdown, it won't be listed.

Once you're done you can edit that paths to relative ones. Or you can wait to export and then use Editors like "NoteTab" or "Notepad ++" to load all of the exported pages at once and then do a search and replace on like absolute paths to replace them all at once to a relative paths if need be.

I still use both of those Editors for many older sites. And I will need to when I export this current project as well because I have a lot of editing I will need to do after export because we use server side includes etc... and I'll need to break up every page with a whole slew of tests and includes etc... There's just no escaping that for me.

Saj

Yes, if you can't get access to the client's server right away, then your way is the way to do it. I tend to do it that way for the most part anyways.

I just add things to my test server first so while I'm working on the site, so I can make sure it's all working correctly. If the added time to upload (which really isn't all that much) isn't doing anything to hinder your work, I would really suggest doing all of it on your test server until the project is completed and everything is working as you need it to be. Then do your link changes as needed since truly, they probably aren't all that many. Most of the time if it's a CDN it's a one time change and that changes it for all pages so it's pretty quick. Same for if it's a Global item you're adding to the HEAD of the site in the project settings. Just try to be good about keeping it simple for yourself.

IF you can get access to the client's server in the beginning, then by all means set up the custom CDN's to their site directly from the start. That will save you the hassle of having to change any of them when the site gets moved to the client's server. I would not however, suggest doing that with PDF files or music or video until you have your routine set up enough that you know it will work. I have been adding videos and WowSlider galleries for years so I've got my routine pretty well set up and that means I don't care if I can see it correctly on the preview or not. I know they will work and will work as expected at this point. Once you're comfy enough with things that will happen for you too I'm sure.

Thanks guy! @Jo, this was the sentence you wrote that made my day!: “Same for if it’s a Global item you’re adding to the HEAD of the site in the project settings. Just try to be good about keeping it simple for yourself.”

;-) #mademyday

haha glad it helped @gary, have fun with it!

@Jo Having the same issue and deciding to setup a custom CDN, I was unable to find any further information on how to configure BSS to use my own CDN for Font's. Can you link me to the instructions, please?

This should get you started, good luck!

https://bootstrapstudio.io/forums/topic/google-fonts-local/

@Jo, thanks for the link. So in that solution I link up an external CSS to do the trick. Since font references are relative, this will work, right. It's still not very intuitive, because now I end up with an external dependency. Are there plans in offering an local option? It would be also ok for me to import font files and CSS by hand, all it needs is an option to disable external links in the header, entirely.

even easier: https://support.undsgn.com/hc/en-us/articles/360000840849-Self-hosted-Google-Fonts

  • Access the Google WebFonts Helper (a convenient tool that helps you create a web version of your favorite Google Fonts).
  • Select a font and required options you need (Select charsets, Select styles and Browsers support). In the option "Customize folder prefix" insert "fonts/", screenshot;

  • Download the font and upload to the "fonts" folder (if you don't have one create an empty folder named "fonts")

  • Copy the CSS code from Google WebFonts Helper and paste it in the "userstyle.css"