All the resources that are needed for this website are self-hosted. That way, there is no chance that others (like google or facebook) can track you. The problem is that most webdevelopers don’t care (and there are other reasons why you maybe don’t want to self-host some resources). In consequence, most templates, tutorials, examples etc. make use of CDNs, like code.jquery.com or fonts.google.com.
Most of the time, it is quite easy to self-host those resources. In case of jQuery, you can simply download the .js file and put it on your webserver. If you want to self host one of googles webfonts, it is more complicated than that. Here is how I am doing it since I discovered the neat tool google-webfonts-helper:
- Visit fonts.google.com to find a font you like (e.g. Didact Gothic).
- Go to google-webfonts-helper. On the left side, search and select the font you want to self-host.
- On the right side, select the charsets and styles you need. If you are not sure, select all.
- At 3. Copy CSS you have to decide, if you want maximum compatibility (select Best Support) or reduce the size of the CSS file and the space required for the fonts on the host system (select Modern Browsers).
- Empty the Customize folder prefix (optional) field.
- Now copy all the generated CSS code and paste it into a new file with the name of your font (e.g. Didact_Gothic.css).
- Download the zipped font files and unpack them.
- At the root folder of your webserver/webspace, make a folder fonts. Inside this folder, make another folder named after the font (e.g. didact_gothic). Put your font’s .css file and the unzipped font files in that folder.
Now you can use that font in your CSS files
@import url('/fonts/font_name/Font_Name.css');
or your HTML files
<link rel="stylesheet" href="/fonts/font_name/Font_Name.css">.