How to use font family custom font

Step one, you need find the font of your choice

For this example I'll get one from Google fonts but that works with other websites too and I choosed the font "Story Script" https://fonts.google.com/specimen/Story+Script.

Step two, get correct infos to use in the theme

On the page https://fonts.google.com/specimen/Asimovian click on Get font and after on <> Get embed code.

Check you have selected Web and <link> then you should see this in the 1st code area:

<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=Asimovian&display=swap" rel="stylesheet">

Copy the href content so https://fonts.googleapis.com/css2?family=Asimovian&display=swap and open a new tab then paste the link in the address bar, you'll should see this:

/* vietnamese */
@font-face {
  font-family: 'Asimovian';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asimovian/v2/oY1c8evOub78P2XN94MnAvRwU4Q.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Asimovian';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asimovian/v2/oY1c8evOub78P2XN94MnA_RwU4Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Asimovian';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/asimovian/v2/oY1c8evOub78P2XN94MnDfRw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Here we need 2 things the name and the source (src) for majority of case take them in latin: so for this example, copy Asimovian and paste it in your notepad for example then copy https://fonts.gstatic.com/s/asimovian/v2/oY1c8evOub78P2XN94MnDfRw.woff2 and paste it in the notepad too.

Step three and last, use these infos in the theme

1° In the Stylus popup go to Font family and select Custom Font 2° Just under in Font family custom name copy/paste Asimovian 3° Just under in Font family custom URL copy/paste "https://fonts.gstatic.com/s/asimovian/v2/oY1c8evOub78P2XN94MnDfRw.woff2"

That's all.

Do you find this project useful? You can support its development using the buttons in the page footer.