Created
February 21, 2020 14:47
-
-
Save audunolsen/d7bc33ac76937b6f2e694c79470de972 to your computer and use it in GitHub Desktop.
Quick way to set all my local Roboto fonts
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
/* | |
I've got the following file structure and want a quick way to set all my local Roboto fonts. | |
../assets/fonts/Roboto | |
Roboto-Black.woff | |
Roboto-Black-Italic.woff | |
Roboto-Bold.woff | |
Roboto-Bold-Italic.woff | |
Roboto-Light.woff | |
Roboto-Light-Italic.woff | |
Roboto-Medium.woff | |
Roboto-Medium-Italic.woff | |
Roboto-Regular.woff | |
Roboto-Regular-Italic.woff | |
Roboto-Thin.woff | |
Roboto-Thin-Italic.woff | |
*/ | |
$family: ( | |
Thin : 100, | |
Light : 300, | |
Regular : 400, | |
Medium : 500, | |
Bold : 700, | |
Black : 900, | |
); | |
@mixin font-face( | |
$type, | |
$weight, | |
$italic : null, | |
$font : "Roboto", | |
$basePath : "../assets/fonts/#{$font}/#{$font}" | |
){ | |
@if $type { $type : "-#{$type}"; } | |
@if $italic { $italic : "-Italic"; } | |
@font-face { | |
font-family: $font; | |
src: url("#{$basePath}#{$type or ""}#{$italic or ""}.woff") format("woff"); | |
font-weight: $weight or normal; | |
font-style: if($italic, italic, normal); | |
} | |
} | |
@each $type, $weight in $family { | |
@include font-face($type, $weight); | |
@include font-face($type, $weight, $italic: true); | |
} | |
html { font-family: "Roboto", Helvetica, Arial, sans-serif; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment