Skip to content

Instantly share code, notes, and snippets.

@Vivelin

Vivelin/ArialRoboto.user.css

Last active December 20, 2020 01:21
Show Gist options
  • Save Vivelin/76b56deeb000c01811243009e134b181 to your computer and use it in GitHub Desktop.
Save Vivelin/76b56deeb000c01811243009e134b181 to your computer and use it in GitHub Desktop.
Download ZIP
Replace Arial and similar fonts with Roboto
Raw
ArialRoboto.user.css
/* ==UserStyle==
@name Arial font replacement (Firefox)
@namespace vivelin.net
@version 1.0.0
@description Replace Arial, Helvetica and similar fonts with Roboto. Requires Roboto to be installed locally. Available from <https://github.com/google/roboto/releases>.
@author Vivelin
@updateURL https://gist.githubusercontent.com/Vivelin/76b56deeb000c01811243009e134b181/raw/ArialRoboto.user.css
@license unlicense
==/UserStyle== */
@font-face { font-family: 'Arial'; src: local('Roboto'); }
@font-face { font-family: 'Helvetica'; src: local('Roboto'); }
@font-face { font-family: 'Helvetica Neue'; src: local('Roboto'); }
@font-face { font-family: 'Arial'; font-weight: 100; src: local('Roboto Thin'); }
@font-face { font-family: 'Helvetica'; font-weight: 100; src: local('Roboto Thin'); }
@font-face { font-family: 'Helvetica Neue'; font-weight: 100; src: local('Roboto Thin'); }
@font-face { font-family: 'Arial'; font-weight: 300; src: local('Roboto Light'); }
@font-face { font-family: 'Helvetica'; font-weight: 300; src: local('Roboto Light'); }
@font-face { font-family: 'Helvetica Neue'; font-weight: 300; src: local('Roboto Light'); }
@font-face { font-family: 'Arial'; font-weight: 500; src: local('Roboto Medium'); }
@font-face { font-family: 'Helvetica'; font-weight: 500; src: local('Roboto Medium'); }
@font-face { font-family: 'Helvetica Neue'; font-weight: 500; src: local('Roboto Medium'); }
@font-face { font-family: 'Arial'; font-weight: 700; src: local('Roboto Bold'); }
@font-face { font-family: 'Helvetica'; font-weight: 700; src: local('Roboto Bold'); }
@font-face { font-family: 'Helvetica Neue'; font-weight: 700; src: local('Roboto Bold'); }
@font-face { font-family: 'Arial'; font-weight: 900; src: local('Roboto Black'); }
@font-face { font-family: 'Helvetica'; font-weight: 900; src: local('Roboto Black'); }
@font-face { font-family: 'Helvetica Neue'; font-weight: 900; src: local('Roboto Black'); }
/**
* Italic variants
*/
@font-face { font-family: 'Arial'; font-style: italic; src: local('Roboto Italic'); }
@font-face { font-family: 'Helvetica'; font-style: italic; src: local('Roboto Italic'); }
@font-face { font-family: 'Helvetica Neue'; font-style: italic; src: local('Roboto Italic'); }
@font-face { font-family: 'Arial'; font-style: italic; font-weight: 100; src: local('Roboto Thin Italic'); }
@font-face { font-family: 'Helvetica'; font-style: italic; font-weight: 100; src: local('Roboto Thin Italic'); }
@font-face { font-family: 'Helvetica Neue'; font-style: italic; font-weight: 100; src: local('Roboto Thin Italic'); }
@font-face { font-family: 'Arial'; font-style: italic; font-weight: 300; src: local('Roboto Light Italic'); }
@font-face { font-family: 'Helvetica'; font-style: italic; font-weight: 300; src: local('Roboto Light Italic'); }
@font-face { font-family: 'Helvetica Neue'; font-style: italic; font-weight: 300; src: local('Roboto Light Italic'); }
@font-face { font-family: 'Arial'; font-style: italic; font-weight: 500; src: local('Roboto Medium Italic'); }
@font-face { font-family: 'Helvetica'; font-style: italic; font-weight: 500; src: local('Roboto Medium Italic'); }
@font-face { font-family: 'Helvetica Neue'; font-style: italic; font-weight: 500; src: local('Roboto Medium Italic'); }
@font-face { font-family: 'Arial'; font-style: italic; font-weight: 700; src: local('Roboto Bold Italic'); }
@font-face { font-family: 'Helvetica'; font-style: italic; font-weight: 700; src: local('Roboto Bold Italic'); }
@font-face { font-family: 'Helvetica Neue'; font-style: italic; font-weight: 700; src: local('Roboto Bold Italic'); }
@font-face { font-family: 'Arial'; font-style: italic; font-weight: 900; src: local('Roboto Black Italic'); }
@font-face { font-family: 'Helvetica'; font-style: italic; font-weight: 900; src: local('Roboto Black Italic'); }
@font-face { font-family: 'Helvetica Neue'; font-style: italic; font-weight: 900; src: local('Roboto Black Italic'); }
Raw
Test Arial.html
<!doctype html>
<style>
html, body {
font-size: 1.0rem;
}
.arial {
font-family: 'Arial';
}
.helv {
font-family: 'Helvetica';
}
.heln {
font-family: 'Helvetica Neue';
}
.robo {
font-family: 'Roboto';
}
.italic {
font-style: italic;
}
.w100 {
font-weight: 100;
}
.w100:after {
content: ' 100';
opacity: 0.33;
font-size: .8em;
}
.w200 {
font-weight: 200;
}
.w200:after {
content: ' 200';
opacity: 0.33;
font-size: .8em;
}
.w300 {
font-weight: 300;
}
.w300:after {
content: ' 300';
opacity: 0.33;
font-size: .8em;
}
.w400 {
font-weight: 400;
}
.w400:after {
content: ' 400';
opacity: 0.33;
font-size: .8em;
}
.w500 {
font-weight: 500;
}
.w500:after {
content: ' 500';
opacity: 0.33;
font-size: .8em;
}
.w600 {
font-weight: 600;
}
.w600:after {
content: ' 600';
opacity: 0.33;
font-size: .8em;
}
.w700 {
font-weight: 700;
}
.w700:after {
content: ' 700';
opacity: 0.33;
font-size: .8em;
}
.w800 {
font-weight: 800;
}
.w800:after {
content: ' 800';
opacity: 0.33;
font-size: .8em;
}
.w900 {
font-weight: 900;
}
.w900:after {
content: ' 900';
opacity: 0.33;
font-size: .8em;
}
.card-group {
display: flex;
}
.card {
padding: .5em 1em;
margin: 1em .5em;
box-shadow: 0 1px 1px 0 rgba(60, 64, 67, .08), 0 1px 3px 1px rgba(60, 64, 67, .16);
border-radius: 4px;
}
.card p {
font-size: 1em;
margin: 0;
}
</style>
<article class="card-group">
<div class="card arial">
<p class=w100>Arial</p>
<p class=w200>Arial</p>
<p class=w300>Arial</p>
<p class=w400>Arial</p>
<p class=w500>Arial</p>
<p class=w600>Arial</p>
<p class=w700>Arial</p>
<p class=w800>Arial</p>
<p class=w900>Arial</p>
</div>
<div class="card arial italic">
<p class=w100>Arial</p>
<p class=w200>Arial</p>
<p class=w300>Arial</p>
<p class=w400>Arial</p>
<p class=w500>Arial</p>
<p class=w600>Arial</p>
<p class=w700>Arial</p>
<p class=w800>Arial</p>
<p class=w900>Arial</p>
</div>
<div class="card helv">
<p class=w100>Helvetica</p>
<p class=w200>Helvetica</p>
<p class=w300>Helvetica</p>
<p class=w400>Helvetica</p>
<p class=w500>Helvetica</p>
<p class=w600>Helvetica</p>
<p class=w700>Helvetica</p>
<p class=w800>Helvetica</p>
<p class=w900>Helvetica</p>
</div>
<div class="card helv italic">
<p class=w100>Helvetica</p>
<p class=w200>Helvetica</p>
<p class=w300>Helvetica</p>
<p class=w400>Helvetica</p>
<p class=w500>Helvetica</p>
<p class=w600>Helvetica</p>
<p class=w700>Helvetica</p>
<p class=w800>Helvetica</p>
<p class=w900>Helvetica</p>
</div>
<div class="card heln">
<p class=w100>Helvetica Neue</p>
<p class=w200>Helvetica Neue</p>
<p class=w300>Helvetica Neue</p>
<p class=w400>Helvetica Neue</p>
<p class=w500>Helvetica Neue</p>
<p class=w600>Helvetica Neue</p>
<p class=w700>Helvetica Neue</p>
<p class=w800>Helvetica Neue</p>
<p class=w900>Helvetica Neue</p>
</div>
<div class="card heln italic">
<p class=w100>Helvetica Neue</p>
<p class=w200>Helvetica Neue</p>
<p class=w300>Helvetica Neue</p>
<p class=w400>Helvetica Neue</p>
<p class=w500>Helvetica Neue</p>
<p class=w600>Helvetica Neue</p>
<p class=w700>Helvetica Neue</p>
<p class=w800>Helvetica Neue</p>
<p class=w900>Helvetica Neue</p>
</div>
<div class="card robo">
<p class=w100>Roboto</p>
<p class=w200>Roboto</p>
<p class=w300>Roboto</p>
<p class=w400>Roboto</p>
<p class=w500>Roboto</p>
<p class=w600>Roboto</p>
<p class=w700>Roboto</p>
<p class=w800>Roboto</p>
<p class=w900>Roboto</p>
</div>
<div class="card robo italic">
<p class=w100>Roboto</p>
<p class=w200>Roboto</p>
<p class=w300>Roboto</p>
<p class=w400>Roboto</p>
<p class=w500>Roboto</p>
<p class=w600>Roboto</p>
<p class=w700>Roboto</p>
<p class=w800>Roboto</p>
<p class=w900>Roboto</p>
</div>
</article>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment