Replacing web page fonts

After reading “ Web typography today. Part V "I wanted to get rid of the already bored fonts that are used on most web pages. It would be nice to replace some of them (for example, Arial, Verdana, Tahoma, Times New Roman, Georgia) with more modern ones (Calibri, Corbel, Constantia).

In any browser it is possible to prohibit the use of fonts indicated on the page. But in this case, we get the same fonts everywhere, which looks pretty boring.

How to replace one font with another? To do this, you can use the Privoxy local filtering proxy server by setting it up as described below.

1. Install Privoxy. Go to its directory (C: \ Program files \ Privoxy).
')
2. Find in the file config.txt line filterfile default.filter. Connect custom filters as follows:

filterfile default.filter
filterfile user.filter # User customizations


3. Create a file user.filter with the contents:

FILTER: css-font-family Replace some font families

# 'font'
# Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]?
# <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

# 'font-family'
# Value: [[ <'family-name'> | <'generic-family'> ] [, <'family-name'>| <'generic-family'>]* ] | inherit

s@(font-family\s*:|font\s*:\s*[az-]*\s*[az-]*\s*[az-]*\s*[.0-9]+[az%]*(?:/[.0-9]+[az%]*)?)\s*"?(Verdana|Arial|Tahoma|Helvetica)"?@$1 sans-serif /*Privoxy*/, $2@ig

s@(font-family\s*:|font\s*:\s*[az-]*\s*[az-]*\s*[az-]*\s*[.0-9]+[az%]*(?:/[.0-9]+[az%]*)?)\s*"?(Times|Times New Roman|Georgia)"?@$1 serif /*Privoxy*/, $2@ig

s@(font-family\s*:|font\s*:\s*[az-]*\s*[az-]*\s*[az-]*\s*[.0-9]+[az%]*(?:/.[0-9]+[az%]*)?)\s*"?(Courier|Courier New)"?@$1 monospace /*Privoxy*/, $2@ig


This file defines custom filters applied with CSS and HTML code. These filters work as follows. In addition to the font-family property and font, the value of which begins with one of the replaced fonts, a font that is more interesting for you is added to the top of the font list. For example,

font-family: Arial, Verdana

converted to

font-family: sans-serif / * Privoxy * /, Arial, Verdana.

4. Add the following lines to the user.action file:

#######################################################################
# CSS filtering

{ +client-header-tagger{css-requests} }
/

{ +server-header-tagger{content-type} }
/

{ +filter{css-font-family} }
TAG:^CSS-REQUEST$
TAG:^(text/html|text/javascript|application/xhtml+xml|application/xml)$

#######################################################################


5. Configure the browser, specifying localhost: 8118 as a proxy server.

6. Clear browser cache.

7. In the default browser, set the preferred fonts.

8. For Firefox: it is recommended to install the No Squint extension. It will set the default text scale. You can set, for example, 110 or 115%.

This example shows that the text is displayed in the Corbel font, which replaced the one used by the designers of the Verdana site.