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 the 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 local Privoxy filtering proxy server by configuring it as described below.
1. Install Privoxy. Go to its directory (C: \ Program files \ Privoxy).
2. Find the line filterfile default.filter in the config.txt file. Connect custom filters as follows: 3. Create a user.filter file with contents: This file defines custom filters used with CSS and HTML code. These filters work as follows. To some property font-family and font, the value of which begins with one of the replaced fonts, a font that is more interesting to you is added to the top of the list of fonts. For example, font-family: Arial, Verdana is converted to font-family: sans-serif / * Privoxy * /, Arial, Verdana. 4. Add the following lines to the user.action file: 5. Configure the browser by specifying localhost: 8118 as a proxy server. 6. Clear browser cache.
7. In the default browser, set preferred fonts.
8. For Firefox: It is recommended to install the No Squint extension . It will allow you to set the default text scale. You can set, for example, 110 or 115%.
On this example it is clear that the text is displayed font Corbel, who replaced the designers used Verdana site.
In any browser, it is possible to prohibit the use of the 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 local Privoxy filtering proxy server by configuring it as described below.
1. Install Privoxy. Go to its directory (C: \ Program files \ Privoxy).
2. Find the line filterfile default.filter in the config.txt file. Connect custom filters as follows: 3. Create a user.filter file with contents: This file defines custom filters used with CSS and HTML code. These filters work as follows. To some property font-family and font, the value of which begins with one of the replaced fonts, a font that is more interesting to you is added to the top of the list of fonts. For example, font-family: Arial, Verdana is converted to font-family: sans-serif / * Privoxy * /, Arial, Verdana. 4. Add the following lines to the user.action file: 5. Configure the browser by specifying localhost: 8118 as a proxy server. 6. Clear browser cache.
filterfile default.filter
filterfile user.filter # User customizations
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*[a-z-]*\s*[a-z-]*\s*[a-z-]*\s*[.0-9]+[a-z%]*(?:/[.0-9]+[a-z%]*)?)\s*"?(Verdana|Arial|Tahoma|Helvetica)"?@$1 sans-serif /*Privoxy*/, $2@ig
s@(font-family\s*:|font\s*:\s*[a-z-]*\s*[a-z-]*\s*[a-z-]*\s*[.0-9]+[a-z%]*(?:/[.0-9]+[a-z%]*)?)\s*"?(Times|Times New Roman|Georgia)"?@$1 serif /*Privoxy*/, $2@ig
s@(font-family\s*:|font\s*:\s*[a-z-]*\s*[a-z-]*\s*[a-z-]*\s*[.0-9]+[a-z%]*(?:/.[0-9]+[a-z%]*)?)\s*"?(Courier|Courier New)"?@$1 monospace /*Privoxy*/, $2@ig
#######################################################################
# 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)$
#######################################################################
7. In the default browser, set preferred fonts.
8. For Firefox: It is recommended to install the No Squint extension . It will allow you to set the default text scale. You can set, for example, 110 or 115%.
On this example it is clear that the text is displayed font Corbel, who replaced the designers used Verdana site.
