Move Google Fonts to link tag

Author: DiogoRibeiro7

_includes/head.html

@@ -17,6 +17,10 @@
 <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"></noscript>
+<!-- Google Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cardo&display=swap" rel="stylesheet">
 
 {% if site.head_scripts %}
   {% for script in site.head_scripts %}

_sass/minimal-mistakes/_variables.scss

@@ -6,8 +6,7 @@
    Typography
    ========================================================================== */
 
-// Importing Cardo from Google Fonts or another source
-@import url('https://fonts.googleapis.com/css2?family=Cardo&display=swap');
+// Cardo font is loaded via a <link> tag in the site head
 
 $doc-font-size: 16 !default;