Right way to embed variable google font Rubik

Question

I'm tring to import Rubik's all variations but I've some issue. I would like to have all rubik's variation in the same url (italic and weight) and according with this google's article and this from css-triks I wrote my url using periods and this seem to work if I import only weight's axis

https://fonts.googleapis.com/css2?family=Rubik:wght@400..900&display=swap

but when I add the italic axis to url google return me "400 error: missing font family"

https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0..1,400..900&display=swap

It seem like italic doesn't have all variation though the Rubik's type tester allow to use italic.

So what I'm doing wrong?

I would have all rubik's variation (italic and weight) in the same url. I've wrote the url following the instructions in a google fonts's article but it doesn't work.

score 0 · Accepted Answer · answered Nov 28 '22 at 15:28

Apparently, the ital feature currently requires two load 2 font files.

Maybe related to the fact, it provides only 2 values:
0 (off/normal) and 1 (on/italic)
So it's not a real design axis providing interpolated values like the similar slnt (slant) axis.

However you can use this URL:
https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900

I highly recommend this post:
How To Get The Variable Font Links From Google Fonts?
– it also contains a list of google font URLs

fontWeight.addEventListener('input', e=>{
  preview.style.fontWeight= +e.currentTarget.value;
})

ital.addEventListener('input', e=>{
  let fontStyle = e.currentTarget.checked ? 'italic' : 'normal';
  preview.style.fontStyle= fontStyle;
})

/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300 900;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWEBXyIfDnIV7nEnX661A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body{
font-family:'Rubik';
font-size:20vmin;
}

.AxesWrp{
font-size:12px;
}

.preview{
transition: 0.3s
}

<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900" rel="stylesheet">

<div class="AxesWrp" >
<label>wght: <input id="fontWeight" type="range" min="300" max="900" value="300" step="0.1"></label>
<label> ital <input id="ital" type="checkbox" value="0"></label>
</div>

<p id="preview" class="preview">Hamburgefons</p>

Right way to embed variable google font Rubik

1 Answers1