Difference between revisions of "Replacement Fonts"

From FuckOffGoogle
Jump to: navigation, search
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
== Fonts ==
 
== Fonts ==
<span class="problem">
+
<span class="problem">Fonts are an important part of the style of a website. Google has cynically made it incredibly easy to utilize any of a huge number of fonts on websites, but it comes with a price: what they get in exchange for this, is the ability to track your visitors. It is therefore important to the privacy of your visitors to ensure that you do not use Google fonts in your website. There are two ways to avoid this. If using specific fonts is a priority, the best way to do this is to simply host the fonts on your own server, so that no third-parties receive data about your visitors through your fonts. Since this solution requires some level of comfort in handling your website’s files, if you are comfortable with having some users fall back on default web fonts, then you can simply “font stack,” and rely on the user’s own system fonts to do the job.</span>
 
 
The Font is the shape of the letter appearing in the website. A web developer designing the pages, tried to pick the best based on style and readability. Our devices have many fonts, but for a  web developer, a lots of time, is simpler pick a theme. Because of technical reasons, G. begun to serve these font from its own Cloud.
 
 
 
'''Follow the money!''' Google serve fonts, Theme developer uses these fonts, web developer pick themes, web owner pay the web developer, users of the web page are tracker by Google when they navigate on the pages, Google profit on studying users behavior.
 
</span>
 
  
 
== Replacements ==
 
== Replacements ==
  
 
<span class="intro">
 
<span class="intro">
To remove the Google fonts in the website, you should find in the .css and .html files all the reference to a '.ttf' inclusion (yes this is difficult on purpose, figure out our target audicene and the amount of web developing resources is still a point to address)
+
To remove Google Fonts from your website and self-host instead, you will need to upload the fonts you want to use to your server. Some services for selecting and downloading or purchasing fonts are listed below. You will then enter the CSS and HTML files of your pages and search for all references to font-face or font-family and remove them. You will then replace these references with a direct link to your self-hosted font. Typically, when you download fonts to use for your website, you will receive a folder of several variations of the font – this allows the font to be rendered in various formats and browsers. You may receive .eot, .woff, and .ttf files.
 
</span>
 
</span>
  
 
<h3 class="title entry solution-1">Fontello</h3>
 
<h3 class="title entry solution-1">Fontello</h3>
 
<span class="link entry solution-1">http://fontello.com/</span>
 
<span class="link entry solution-1">http://fontello.com/</span>
<span class="description entry solution-1">Fontello is a collection of icons and you can download your package</span>  
+
<span class="description entry solution-1">Fontello is a collection of icons that you can download and self-host on your website to call on as you would a font.</span>  
  
 
<h3 class="title entry solution-2">Font Squirrel</h3>
 
<h3 class="title entry solution-2">Font Squirrel</h3>
 
<span class="link entry solution-2">https://www.fontsquirrel.com/</span>
 
<span class="link entry solution-2">https://www.fontsquirrel.com/</span>
<span class="entry solution-2 description">Font Squirrel provides free font and permits to download your local package of fonts</span>
+
<span class="entry solution-2 description">Font Squirrel is a popular service which enables you to download fonts to self-host on your website as specified above.</span>
 +
 
 +
<h3 class="title entry solution-3">Practical Typography</h3>
 +
<span class="link entry solution-3">https://practicaltypography.com/free-fonts.html</span>
 +
<span class="entry solution-3 description">Practical Typography provides a small selection of open license fonts to download and self-host on your website as specified above.</span>
 +
 
 +
<p>
 +
<h4> Detail information on how to stay with local fonts</h4>
 +
Once you upload these fonts, you can call on them in the following manner in your CSS files. For instance, if you wanted to use Open Sans on your website, you would add the following to the top of your CSS file:
 +
 
 +
<pre>@font-face {
 +
    font-family: 'Open Sans';
 +
    src: url('opensans-regular.eot');
 +
    src: url('opensans-regular.eot?#iefix') format('embedded-opentype'),
 +
        url('opensans-regular.woff') format('woff'),
 +
        url('opensans-regular.ttf') format('truetype'),
 +
        url('opensans-regular.svg#open_sansregular') format('svg');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
</pre>
 +
 
 +
You will want to make sure that all of the urls to the fonts include any directories that you may have placed the fonts in.
 +
 
 +
You may notice I have referred to a sans-serif and a serif font. Keep that in mind. Now that you have specified your fonts, you can call on them throughout your CSS file wherever a font is called. Do this by searching for “font-family” in the document, and replace whatever that field contains with the following, depending on which font you want to call.
 +
 
 +
To call on the serif font, you can simply change the text along the lines below. When you include “serif” at the end, this is called font-stacking, and it’s a useful back-up in case there are compatibility issues with your font displaying in your visitor’s browser:
 +
 
 +
<pre>font-family: 'Liberation Serif', serif;</pre>
 +
 
 +
When you want to call on your sans serif font, you could do something like this:
 +
 
 +
<pre>font-family: 'Open Sans', sans-serif;</pre>
 +
 
 +
Even though you have uploaded your favorite fonts to your server, if you do not want to automatically default to the system default fonts should your font fail, you can do further font-stacking with common fonts. Simply call on the fonts in your order of preference as explained below, keeping your self-hosted font as the first font in the stack.
 +
 
 +
<h4>Alternative: using Web safe fonts</h4>
 +
 
 +
If specifying fonts is not a high priority for you, an easier solution is to font-stack with “web safe” fonts. These are common fonts that you list in order of preference, typically in a list ending either in “serif” or “sans-serif” as a back-up, as seen above. For instance, if you want your user to see the Georgia font, but are comfortable with any serif font displaying, then in your CSS and HTML files, you can simply remove all references to the Google fonts as above, and state something like this wherever a font is called (search for any reference to “font-family”):
 +
 
 +
<pre>font-family: ‘Georgia’, ‘Times New Roman’, serif;</pre>
 +
 
 +
If the user’s system contains the Georgia font, that should display, if not, it will fall back on Times New Roman, or finally on the system-default serif font. List your favorite web-safe serif or sane-serif fonts according to similarity and preference. W3 has a useful article[https://www.w3schools.com/cssref/css_websafe_fonts.asp] listing and displaying web safe fonts for you to choose from.
 +
 
 +
That's it! You've liberated your website and visitors from a Google tracker!
 +
 
 +
</p>

Latest revision as of 10:50, 8 March 2019

Fonts

Fonts are an important part of the style of a website. Google has cynically made it incredibly easy to utilize any of a huge number of fonts on websites, but it comes with a price: what they get in exchange for this, is the ability to track your visitors. It is therefore important to the privacy of your visitors to ensure that you do not use Google fonts in your website. There are two ways to avoid this. If using specific fonts is a priority, the best way to do this is to simply host the fonts on your own server, so that no third-parties receive data about your visitors through your fonts. Since this solution requires some level of comfort in handling your website’s files, if you are comfortable with having some users fall back on default web fonts, then you can simply “font stack,” and rely on the user’s own system fonts to do the job.

Replacements

To remove Google Fonts from your website and self-host instead, you will need to upload the fonts you want to use to your server. Some services for selecting and downloading or purchasing fonts are listed below. You will then enter the CSS and HTML files of your pages and search for all references to font-face or font-family and remove them. You will then replace these references with a direct link to your self-hosted font. Typically, when you download fonts to use for your website, you will receive a folder of several variations of the font – this allows the font to be rendered in various formats and browsers. You may receive .eot, .woff, and .ttf files.

Fontello

http://fontello.com/ Fontello is a collection of icons that you can download and self-host on your website to call on as you would a font.

Font Squirrel

https://www.fontsquirrel.com/ Font Squirrel is a popular service which enables you to download fonts to self-host on your website as specified above.

Practical Typography

https://practicaltypography.com/free-fonts.html Practical Typography provides a small selection of open license fonts to download and self-host on your website as specified above.

Detail information on how to stay with local fonts

Once you upload these fonts, you can call on them in the following manner in your CSS files. For instance, if you wanted to use Open Sans on your website, you would add the following to the top of your CSS file:

@font-face {
    font-family: 'Open Sans';
    src: url('opensans-regular.eot');
    src: url('opensans-regular.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular.woff') format('woff'),
         url('opensans-regular.ttf') format('truetype'),
         url('opensans-regular.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

You will want to make sure that all of the urls to the fonts include any directories that you may have placed the fonts in.

You may notice I have referred to a sans-serif and a serif font. Keep that in mind. Now that you have specified your fonts, you can call on them throughout your CSS file wherever a font is called. Do this by searching for “font-family” in the document, and replace whatever that field contains with the following, depending on which font you want to call.

To call on the serif font, you can simply change the text along the lines below. When you include “serif” at the end, this is called font-stacking, and it’s a useful back-up in case there are compatibility issues with your font displaying in your visitor’s browser:

font-family: 'Liberation Serif', serif;

When you want to call on your sans serif font, you could do something like this:

font-family: 'Open Sans', sans-serif;

Even though you have uploaded your favorite fonts to your server, if you do not want to automatically default to the system default fonts should your font fail, you can do further font-stacking with common fonts. Simply call on the fonts in your order of preference as explained below, keeping your self-hosted font as the first font in the stack.

Alternative: using Web safe fonts

If specifying fonts is not a high priority for you, an easier solution is to font-stack with “web safe” fonts. These are common fonts that you list in order of preference, typically in a list ending either in “serif” or “sans-serif” as a back-up, as seen above. For instance, if you want your user to see the Georgia font, but are comfortable with any serif font displaying, then in your CSS and HTML files, you can simply remove all references to the Google fonts as above, and state something like this wherever a font is called (search for any reference to “font-family”):

font-family: ‘Georgia’, ‘Times New Roman’, serif;

If the user’s system contains the Georgia font, that should display, if not, it will fall back on Times New Roman, or finally on the system-default serif font. List your favorite web-safe serif or sane-serif fonts according to similarity and preference. W3 has a useful article[1] listing and displaying web safe fonts for you to choose from.

That's it! You've liberated your website and visitors from a Google tracker!