Skip to content

Instantly share code, notes, and snippets.

@audunolsen
Created February 21, 2020 14:47
Show Gist options
  • Save audunolsen/d7bc33ac76937b6f2e694c79470de972 to your computer and use it in GitHub Desktop.
Save audunolsen/d7bc33ac76937b6f2e694c79470de972 to your computer and use it in GitHub Desktop.
Quick way to set all my local Roboto fonts
/*
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