Set a google fonts to quark theme

2

@semplicewebsite There are several ways of doing it, these are just two of them.

Option 1: Using @import in css:

  • I presume you already know your way in Google Fonts to find the @import statement.
  • Create a child theme inherited from Quark if not already
  • Create file '/user/themes/mytheme/css/custom.css' or use your existing css file and add:
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
   font-family: 'Open Sans', sans-serif;
}
    Note: If you don’t want to use a child theme, you can insert above code into ‘user/themes/quark/css/custom.css’.

Option 2: Using <link> in template:

  • I presume you already know your way in Google Fonts to find the <link> statement.
  • Create a child theme inherited from Quark if not already
  • Copy '/user/themes/quark/templates/partials/base.html.twig' from Quark to your theme: '/user/themes/mytheme/templates/partials/
  • Paste the link in template 'base.html.twig':
    {{ assets.css() }}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  • Create file '/user/themes/mytheme/css/custom.css' or use your existing css file and add:
    body {
  font-family: 'Open Sans', sans-serif;
}

If you want to know which one is better, you’re not the first to ask: @import vs link

Almost forgot… If you want to store the fonts on your server, you might find a solution in this reply and further down in a similar topic…

If you have any questions, don’t hesitate to ask…

1 Like