Created
May 2, 2020 15:12
-
-
Save francoisgeorgy/069097bd972aa80aeb13c9de98a23bfd to your computer and use it in GitHub Desktop.
system font stack #css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* https://css-tricks.com/snippets/css/system-font-stack/ */ | |
| /* System Fonts as used by GitHub */ | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| } | |
| /* System Fonts as used by Medium and WordPress */ | |
| body { | |
| font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; | |
| } | |
| /* Define the "system" font family */ | |
| @font-face { | |
| font-family: system; | |
| font-style: normal; | |
| font-weight: 300; | |
| src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); | |
| } | |
| /* Now, let's apply it on an element */ | |
| body { | |
| font-family: "system"; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment