Migrate from Droid fonts to Noto fonts, and host them locally

I was just scrolling our CSS and surprised to find we use Google Fonts
embeds! I don't like depending on external hosts like that.

Google Fonts doesn't offer the Droid fonts for download anymore,
though—looks like the Noto fonts are their spiritual successor. The
Droid Serif and Noto Serif fonts look visually identical to me, but the
Sans ones are a bit different… I kinda like the charm of the Droid Sans
better, but ah well! I'd rather be moving forward with a more modern
font with more reliable glyph support etc for now.

app/assets/stylesheets/_layout.sass

@@ -2,9 +2,6 @@
 @import "partials/clean/constants"
 @import "partials/clean/mixins"
 @import fonts
-@import url("https://fonts.googleapis.com/css?family=Droid+Sans:400,700")
-@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic")
-@import url("https://fonts.googleapis.com/css?family=Calligraffitti")
 
 /* Reset
 

app/assets/stylesheets/fonts.css.sass

@@ -12,3 +12,21 @@
   font-family: Delicious
   font-style: italic
   src: local("Delicious"), font-url("Delicious-Italic.otf")
+
+@font-face
+  font-family: "Noto Sans"
+  src: local("Noto Sans"), font-url("NotoSans-Variable.ttf")
+
+@font-face
+  font-family: "Noto Sans"
+  font-style: italic
+  src: local("Noto Sans"), font-url("NotoSans-Italic-Variable.ttf")
+
+@font-face
+  font-family: "Noto Serif"
+  src: local("Noto Serif"), font-url("NotoSerif-Variable.ttf")
+
+@font-face
+  font-family: "Noto Serif"
+  font-style: italic
+  src: local("Noto Serif"), font-url("NotoSerif-Italic-Variable.ttf")

app/assets/stylesheets/partials/clean/_constants.sass

@@ -19,8 +19,8 @@ $error-bg-color:        #fbe3e4
 $error-border-color:    #fbc2c4
 
 $header-font:  Delicious, Helvetica, Arial, Verdana, sans-serif
-$main-font:    "Droid Sans", Helvetica, Arial, Verdana, sans-serif
+$main-font:    "Noto Sans", Helvetica, Arial, Verdana, sans-serif
-$text-font:    "Droid Serif", Georgia, "Times New Roman", Times, serif
+$text-font:    "Noto Serif", Georgia, "Times New Roman", Times, serif
 
 $object-img-size:  80px
 $object-width:     100px