Including Google font with variants

[34fame]

I want to include the Raleway font. The download from Google Fonts has a variable font named "Raleway-VariableFont_wght.ttf" and then a static folder containing numerous files such as "Raleway-Regular.ttf", "Raleway-Bold.ttf", "Raleway-Light.ttf", etc.

I have the following in app.sass and it works as far as displaying the Raleway font's regular variant:

@font-face
   font-family: Raleway
   src: url(./fonts/Raleway-Regular.ttf)

What can I do to support all variants? Use the variable font file? Include all variants in my CSS definition?

The documentation reference only deals with single font file examples.

Thanks!

[pdanpdan]

You know, when you select the fonts in Google fonts it'll show you exactly what you have to use.

[34fame]

If I select multiple styles/variants it shows options for <link> and @import.

The link option shows, for example:

<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=Raleway:ital,wght@0,100;0,200;1,100&display=swap" rel="stylesheet">

The import options shows, for example:

<style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;1,100&display=swap');
</style>

I have no clue how that translates when I have the fonts downloaded and referencing them in app.sass. That is my question.

[nicobao]

@34fame makes a point - I have the same issue.

[hawkeye64]

If you haven't already figured this out, hopefully, I can give some insights.

In my index.template.html I have this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">

Then in my app.sass I do this:

html, body, #q-app
  font-family: "Poppins", "Roboto", "-apple-system", "Helvetica Neue", Helvetica, Arial, sans-serif !important
  font-size: 14px

Now, Poppins because the default font used for my site.

[nicobao]

This is dependent on google server. And it is not consistent with the Quasar documentation, that suggests loading the font locally.
#10612 (reply in thread)
https://quasar.dev/style/typography/#add-custom-fonts

[ontwikkelfabriek]

@hawkeye64

In my index.template.html I have this:

But if you put the font link ( or any kind of css/js link ) in the index.template.html then Webpack will not process it (compress, minimize, treeshake, etc. )

Is that correct?

[hawkeye64]

But if you put the font link ( or any kind of css/js link ) in the index.template.html then Webpack will not process it (compress, minimize, treeshake, etc. )

Is that correct?

Correct. But even if you download the font you would want to put it in your public folder anyway for access. The reason for the public folder is there is nothing webpack can do for woff and woff2 files.