This article really falls under the catagory of Usability and Accessibility, as it deals with overriding fonts that are hard to read for some people with sight problems. Viewability has often been overlooked by website template writers who may be young and gifted with very good eyesight, hence they code their fonts to be a fixed size that they find comfortable. Those font sizes are often entirely too small for the elderly, or people with limited sight to resolve. Add to this the fact that web browsers are designed to display web pages as per the styles and fonts specified by the site designers, and that while these fonts sizes can be overridden, it is not always obvious to the users as to how they can do so. Furthermore, even if these folks know how to override default fonts on a webpage, they are forced to do this everytime they revisit that website, since browsers reset to factory default display mode after being closed out and re-opened.
I have often been asked for advise on changing website specified fonts to those preferred by the users, on forums and via direct inquiries (I am the Wiz and am assumed to know all the answers to all the questions!). Instances where this is an issue are typically on forums, where the default stylesheet uses fixed font sizes and/or colors, which the viewer may find difficult to read. People gifted with good eyesight shouldn't goff at this. Your day is coming too.
On a forum where I am the Moderator I was recently asked if it is possible to override the default font size permanently, just for that forum. The administrator is planning to rewrite the stylesheets to allow relative font sizes to be used, which is definitely more user friendly, especially to those with poor eyesight, but until that is accomplished I was able to find a means whereby people using Firefox browsers can create their own custom stylesheet in place of the one used by that forum. The really interesting thing about this custom stylesheet is that it can be specifically targetted to control only the fonts (family, size, color, boldness) on a particular webpage, or for an entire domain. This is good news if you are a frequent reader of a particular forum that uses fixed fonts that you have trouble reading. I have researched a solution for Firefox browser users to override the fonts on a particular website, or even on a particular page or sub-forum. From now on I will refer to this location as the URL.
The rest of this article pertains to the Firefox custom stylesheet workaround. I will publish information for Internet Explorer users in another article.
To begin, you will need find your Firefox Profile folder. Instructions for locating this folder are here, in my extended comments.
The method:
Once you have opened your Firefox Profile folder, open the sub-directory named "Chrome". You will have to create a new text file and name it userContent.css. You can do this in Windows using Notepad, by right-clicking inside the Profile folder and left-clicking on "New," then left-click on "Text document." After you add the pertinent commands to the new text document you should rename it to userContent.css (right-click on file and choose Rename, then type or paste in the new name, then click away from it). Alternately, you can open the sample file named "userContent-example.css" and edit it, then Save As, or Rename it to userContent.css
Here is an example of a custom Firefox Stylesheet to increase the font size, using Percentages or EMs as a measurement, for an exemplified forum URL, where the forum runs on current phpBB code.
@-moz-document url-prefix(http://www.forum.domain.com/) {
.postbody { font-size : 1.2em !important; }
}
Or else, use percentages, like this:
@-moz-document url-prefix(http://www.forum.domain.com/) {
.postbody { font-size : 120% !important; }
}
If the forum's BB code for the class postbody includes a fixed size line-height declaration you can add this to your custom rule: line-height: 1.3em !important;, or line-height: 130% !important;. Alter the em or % number to obtain the best line spacing and to avoid cutting off lower parts of drop letters, like lowercase g, j, p, q, or y.
You would change the URL (http://www.forum.domain.com/) to that of your preferred forum, by copying and pasting it from your browser's address bar. If the forum runs on phpBB code and you want to change the font size in the body of Posts leave the class .postbody as is. Otherwise, you can specify Body to override all font sizes, and use a percentage increase, instead of a set font size. Using the command !important; causes your style rule to override that of the website.
You can discover what stylesheet or css rules are being applied to a web page by viewing the source. In Firefox you press Control + U. Some stylesheets are included in the page you are viewing, within a set of <style> ... </style> tags. Others are in external files. Look in the HEAD section for a line containing; <link rel="stylesheet" type="text/css" src="URL">. Note the location of the external css file as listed in the src=" " part, then highlight and copy it with your mouse. Then go back to the web page in the browser, click on the URL in the address bar, remove any filename and sub-directory that is showing and paste the location of the stylesheet onto the end of the base URL, like this deactivated example:
ht*p://w*w.example.com/templates/site-style.css
If you got it right the stylesheet will display as plain text in the browser, where you can read it or save it as a .css or .txt file. Study the stylesheet to learn about the names of the Classes (names beginning with a period, as in .postbody) and IDs (names beginning with a # sign, like #content), that are assigned font size rules you want to override, and use those class or id names in your custom stylesheet, for that website.
By employing these techniques you can override the preset styles of virtually any website you may frequent, making it easier to view for your eyesight and monitor size situation. I will be posting more information about other techniques to change the font sizes in other articles on my blog.
Continue reading "How to create a custom personal stylesheet for Firefox browsers" »
back to top ^
