google-fontsvariable-fonts

Right way to embed variable google font Rubik

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.

italic rubik's variations

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.

Solution

  • 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>