DEV Community

Sharad Raj (He/Him)
Sharad Raj (He/Him)

Posted on

I changed Github's default font and UI ๐Ÿ˜๐Ÿ˜Ž, fonts glyphs enabled :)

I changed the default font to Montserrat and code font to JetBrains Mono ๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜๐Ÿ˜

Here is how it looks, Love it ๐Ÿ˜ event the font glyphs are enabled :)

Snap

Here you can see the font-glyphs

Glyph snap

Snap 2


You can do it too

Just inject this CSS

#js-pjax-container > div.container-xl.px-3.px-md-4.px-lg-5 > div > div.flex-shrink-0.col-12.col-md-3.mb-4.mb-md-0 > div > div.clearfix.d-flex.d-md-block.flex-items-center.mb-4.mb-md-0 > div.position-relative.d-inline-block.col-2.col-md-12.mr-3.mr-md-0.flex-shrink-0 > a > img {
    max-width: 200px!important;
    border-radius: 0px!important;
}

* {
    font-family: "Montserrat" !important;
}

.blob-wrapper,
.blob-wrapper *,
code,
code *,
pre,
pre *,
.highlight ,
.highlight *{
    font-family: "JetBrains Mono"!important;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

How do you inject CSS?

Collapse
 
sharadcodes profile image
Sharad Raj (He/Him)

User JavaScript and CSS

this is the name of chrome extension

Collapse
 
easrng profile image
easrng

Stylus works better for user styles.

Thread Thread
 
sharadcodes profile image
Sharad Raj (He/Him)

I've used that too but found this to be better