RoelN / SansBullshitSans

Source for the Sans Bullshit Sans font
Apache License 2.0
304 stars 26 forks source link

Add a bookmarklet for easier access to this amazing font #4

Closed rossengeorgiev closed 9 years ago

rossengeorgiev commented 9 years ago

Example code below. Tested on Firefox and Chrome.

 Drag link to bookmarks: <a href="javascript:(function(){e=document.createElement('style');e.innerHTML='@font-face{font-family:SansBullshitSans;src:url(http://sansbullshitsans.com/font/SansBullshitSans.ttf);font-weight:normal}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea{font-family:SansBullshitSans!important;text-transform:lowercase!important;font-variant-ligatures: common-ligatures;-webkit-font-feature-settings:\'liga\' 1,\'dlig\' 1;-moz-font-feature-settings:\'liga\' 1,\'dlig\' 1;-ms-font-feature-settings:\'liga\' 1,\'dlig\' 1;font-feature-settings:\'liga\' 1,\'dlig\' 1;}';document.body.appendChild(e);})();">Apply SansBullshitSans</a>

I've set the url to http://sansbullshitsans.com/font/SansBullshitSans.ttf, but that wont works since the server doesn't set CORS header.

Access-Control-Allow-Origin: *
enapupe commented 9 years ago

+1! Came here to propose the same thing! It would be funny to see those startup websites's words being replaced by bullshit :D

sysr-q commented 9 years ago

Surely just setting html { font-family: SansBullshitSans !important; [...] } would be sufficient, no? (Rather than having a million elements with everything applied)

enapupe commented 9 years ago

Yes, or maybe * ..

rossengeorgiev commented 9 years ago

@sysr-q it's not, since any style on other elements will override the inherited value from html @enapupe * should probably work

enapupe commented 9 years ago

*, *::before, *::after { [...] !important}

sysr-q commented 9 years ago

@rossengeorgiev Really? I never ran into that issue when I did stuff like this with Stylish, but admittedly you don't see !important in the wild much (or, at least you hope you wouldn't).

lachezar commented 9 years ago

Hm, I had the same idea this morning and I wrote a small bookmarklet + hosted the ttf file with CORS: http://dailyffs.com/sansbullshitsans/

RoelN commented 9 years ago

Cheers, I added this to the README, thanks!

peteruithoven commented 4 months ago

@lachezar your hosted font seems to be gone, I'm getting a 404.
https://lucho-yankov.github.io/assets/fonts/SansBullshitSans.ttf

peteruithoven commented 4 months ago

I don't have a solid place to host the font with CORS *, so you'll always need to install the font.

Then you can add the the following bookmarklet:

javascript:(function(style) {style = document.createElement('style'); style.innerHTML = '*{font-family: "Sans Bullshit Sans", sans-serif !important; font-feature-settings: "liga" 1, "dlig" 1;}'; document.head.appendChild(style);}());
  1. Create a new bookmarklet, give it a name and copy paste the code above as link.
  2. Run the bookmarklet on any site.

Or alternatively enable the following style: https://userstyles.world/style/17064/sans-bullshit-sans Using an extension like: https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?pli=1 https://addons.mozilla.org/en-US/firefox/addon/styl-us/

lachezar commented 4 months ago

I have changed my GH account to "lachezar", so now the file is at https://lachezar.github.io/assets/fonts/SansBullshitSans.ttf

@peteruithoven I have fixed the bookmarklet from the link at http://dailyffs.com/sansbullshitsans/

peteruithoven commented 4 months ago

@ lachezar great! One more small suggestion, I would add !important in the font-family, just to make sure it's always applied.

lachezar commented 4 months ago

Good idea, I've added it