Custom fonts when browsing the web

Tom Golden

11/25/2018

This article describes a method to replace old, ugly or inaccessible sans-serif fonts on websites with an excellent font called Inter.

This technique is not new, but the results were pretty good, so thought I'd share them.

When you visit a website, your computer displays resources and instructions sent to your browser. If you want your browser to do something else, either you can change things about your browser, or add an extension to the browser to execute additional instructions.

This method uses the second, using Chrome, though a similar approach would work for other browsers with a similar extension.

The extension is linked here: User JS & CSS

Install extension
Create a new rule
In the input where the placeholder says '*.example.com', put '*'
In the JS input, copy paste this codeblock: ```js const generateFontFace = (fontFamily, embed = true) => { let html = ''; } else { return html.substring(8); } };

const storedFontFamily = window.localStorage.getItem('(font-family)'); if (storedFontFamily) { generateFontFace(storedFontFamily); } else { document.addEventListener('DOMContentLoaded', () => { const fontFamily = window.getComputedStyle(document.body).fontFamily;

  const fonts = fontFamily.split(',').map(s => s.trim());

  if (fonts[fonts.length - 1] === 'sans-serif') {
    const fontToAdd = fonts[0];
    if (fontToAdd !== 'sans-serif') {
      const addQuotes = !['"', "'"].includes(fontToAdd.charAt(0));
      const fontFamily = addQuotes ? JSON.stringify(fontToAdd) : fontToAdd;
      window.localStorage.setItem('_(font-family)_', fontFamily);
      generateFontFace(fontFamily);
    }
  }
});

} 5. In the CSS input, copy paste this codeblock:css body > :first-child::before { content: 'Text'; font-family: Arial, sans-serif; position: absolute; left: -200vw; opacity: 0; pointer-events: none; user-select: none; }

It should all look something like this: Screenshot of form

That's it.

How does it work?

It works in two ways, but the objective is the same; by injecting code to replace fonts with the much more elegant and legible font, Inter. Check out Inter here.

It is currently (in my opinion), by far the best sans-serif font for user interfaces; which websites are.

The first way, is it provides custom font-face declarations that override the default definition of a font. This means that instead of Arial using the Arial on your computer, it is rerouted to use Inter.

Inter is loaded using GitHack, which loads resources indirectly from Github, but using the right headers, including cache forever headers, meaning that Inter only needs to be downloaded once by Chrome and is kept on your computer, so the load is instant.

The second way, is the JavaScript looks at the default font the website is using (by looking at the body tag) and if it is a sans-serif font, it generates a custom font-face declaration for that specific font and adds it the page. So far, this has proven to be a very safe way of calculating the website's default font.

There is a very brief flicker of delay with the fonts changing. As a result of this brief flicker, the most common fonts have been added to the CSS part (Arial, Helvetica, Verdana, Tahoma, Roboto, Raleway, Montserrat, plus more). You can also add more by looking at the JavaScript comment in the CSS file, customizing the font list and running the code. The generated string should then replace all of the CSS below the comment.

The font looks thicker

It is. Inter prioritises legibility, and that means that thin fonts are off the table. Thin fonts are so 2015 anyway.

Can I use something instead of Inter?

Yes, but you'll have to replace all of the links to where Inter is being used to CDN links of another font. If not Inter, I'd recommend IBM Plex Sans, offered by Google Fonts.

How do I disable this for a website?

You can check the toggle on the rule off from the extension's icon popup window.

You can also blacklist it from running on certain websites you visit often by changing the URL input from * to something like *, !a.com, !b.org

How do I remove this completely?

Uninstall the extension.