Skip to content

misemefein/font-tester

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

font-tester

Javascript bookmarklet to override css. Replace the font used on any website with your own font. It grabs whatever font(s) are used on a webpage, and replaces them with a locally installed font—namely—yours. Especially useful for testing non-latin scripts without mocking up contexts with Adobe CC.

Installation instructions. I have only tested this in Firefox and Chrome.

1: Export your .otf as usual from your font editor. It is best to keep naming convention relatively simple, ie [myFont-Regular]

2: Locate your file in Finder, and install in your favourite font management software.

3: Using your favourite code editor, paste in the following:

javascript:(function(){var%20s=(document.getElementsByTagName('head')[0]||document.body).appendChild(document.cre    ateElement('style'));var%20t=document.createTextNode('*{font-family:******!important;%20line-height:%20135%;%20font-size:%201.03rem;}');s.appendChild(t);})();

4: Replace the ****** with your exact font name ie [myFont-Regular]

5: In the browser, show all bookmarks, then duplicate any old bookmark (alt-drag)

6: Rename the link to whatever you want the bookmarklet to display, ie FontTester.

7: In the location (link) field, replace the link from your old bookmark with your new bookmarklet.

8: Load up a test page, and hit the bookmarklet.

The hack essentially targets the page styles, and will change the font, but also increase the font size to 1.03rem (relative em) and also the the leading to 135%. You can of course alter these parameters as you wish.

Any issues, just holler

https://twitter.com/shandontype

About

Simple js hack to override css and replace all fonts in browser with your type design

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published