feat: update to sans-serif fonts (#756)

Co-authored-by: Matt Dole <mdole@users.noreply.github.com>
artsy · Oct 8, 2023 · 2142414 · 2142414
1 parent 6453d41
commit 2142414
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 28 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -7,6 +7,12 @@
   <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
   <meta name="author" content="{{ site.author }}">
 
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://webfonts.artsy.net/all-webfonts.css"
+  />
+
   {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}
   <meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
   {% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}
@@ -40,11 +46,6 @@
   <script src="{{ root_url }}/javascripts/jquery.scrollTo.min.js"></script>
   {% endif %}
 
-  <script type="text/javascript" src="https://fast.fonts.net/jsapi/f7f47a40-b25b-44ee-9f9c-cfdfc8bb2741.js"></script>
-
-
   <link href="{{ root_url }}{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
   {% include google_analytics.html %}
-  <!--[if IE 8]><link href="{{ root_url }}/stylesheets/custom/ie_font.css" type="text/css"><![endif]-->
-
 </head>
diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss
@@ -29,7 +29,6 @@ body > header h2 {
 body {
   line-height: 1.5em;
   color: $text-color;
-  @extend .serif;
 }
 h1 {
   font-size: 2.2em;

diff --git a/_sass/custom/_fonts.scss b/_sass/custom/_fonts.scss
@@ -2,11 +2,4 @@
 // To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's.
 // If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html
 
-//$sans: "Optima", sans-serif;
-// $serif: "AdobeGaramondProRegular",Georgia,Serif;
-$serif: "Adobe Garamond W08", 'adobe-garamond-pro', 'AGaramondPro-Regular', 'Times New Roman', 'Times', 'serif';
-//$mono: "Courier", monospace;
-//$heading-font-family: "Verdana", sans-serif;
-//$header-title-font-family: "Futura", sans-serif;
-//$header-subtitle-font-family: "Futura", sans-serif;
-$block: "ITCAvantGardeGothicStdDemi";
+$sans: "ll-unica77", "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif;
diff --git a/_sass/partials/_blog.scss b/_sass/partials/_blog.scss
@@ -102,7 +102,6 @@ article + article {
     margin-right: .5em;
     text-decoration: none;
     color: mix($text-color, $text-color-light);
-    @extend .serif;
     @include transition(background-color .5s);
     &:hover {
       background: $link-color-hover;

diff --git a/artsy-x-react-native.html b/artsy-x-react-native.html
@@ -3,8 +3,11 @@
 <head>
   <title>Artsy x React Native</title>
   <meta name="viewport" content="width=550px, initial-scale=1.0, maximum-scale=1.0">
-  <link type="text/css" rel="stylesheet" href="https://webfonts.artsy.net/force-webfonts.css?a=b">
-   <!-- <link type=“text/css” rel=“stylesheet” href=“https://webfonts.artsy.net/unica-webfonts.css”> -->
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://webfonts.artsy.net/all-webfonts.css"
+  />
 </head>
 <style>
   html {

diff --git a/css/epic.scss b/css/epic.scss
@@ -27,24 +27,25 @@ body > div > div > section > header#page {
 
   // Title
   h1 {
-    font-size: 64px;
-    font-weight: 400;
+    font-size: 60px;
+    line-height: 70px;
+    font-weight: normal;
   }
   // Author subheading
   h3 {
-    font-size: 22px;
-    font-weight: 400;
+    font-size: 20px;
+    font-weight: normal;
   }
   time {
-    font-size: 22px;
-    font-weight: 400;
+    font-size: 20px;
     padding-top: 5px;
+    font-weight: normal;
   }
 }
 
 article.post {
-  font-size: 22px;
-  line-height: 36px;
+  font-size: 20px;
+  line-height: 32px;
   max-width: 740px;
   margin: 0 auto;
   padding-left: 20px;

diff --git a/css/screen.scss b/css/screen.scss
@@ -53,7 +53,7 @@ $text-color: #636;
 body {
   background-color: $artsy_bg;
   color: $artsy_text;
-  font-family: $serif;
+  font-family: $sans;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
 
@@ -75,7 +75,7 @@ body {
 
 h1, h2, h3 {
   font-size: 20px;
-  font-weight: 600;
+  font-weight: bold;
   margin: 0;
   margin: 0;
   a {
@@ -270,7 +270,7 @@ header#banner {
         border: none;
         width: 100%;
         margin: 0;
-        font-family: $serif;
+        font-family: $sans;
         color: black;
         font-size: 20px;
         outline: 1px black;