Adding Italic Variants to Fonts in picostrap

Adding italic variants for certain fonts can enhance the typography of your website, especially when the italic version is significantly different from the default rendered by browsers. Here’s a step-by-step guide on how to achieve this in PicoStrap.
Check out also this full tutorial article


 

1. Launch the PicoStrap Customizer
- Open the PicoStrap customizer and navigate to the "Typography" section.
- Click on "Choose Font" and select your desired font, to populate the input (eg "Source Sans 3") .

2. Disable Default Font Loading
- Go to the "Header/Footer Code" section and check the "Disable the Font Loading in Header" option.
- Copy all the code from the "Font Loading Header Code" input field and paste it into the "Add Code to Header" field for modifications.

3. Select the Italic Variant
- Go to the https://fontsource.org/ page for your desired font. eg https://fontsource.org/fonts/source-sans-3/cdn
- In the CDN section, navigate to "Variants" and click the "Ital" button.

4. Copy the Generated CSS Code
- Copy the CSS code generated at the end of the page.

/* source-sans-3-latin-wght-normal */
@font-face {
  font-family: 'Source Sans 3 Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-italic.woff2) format('woff2-variations');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

5 Insert the CSS Code into Customizer
- Open the PicoStrap customizer and go to the "Header/Footer Code" section.
- Paste the copied CSS into the "Add Code to Header" input field.
- Ensure the font-family name is correct, for example, change `font-family: 'Source Sans 3 Variable';` to `font-family: 'Source Sans 3';`.


<link rel='dns-prefetch' href='//cdn.jsdelivr.net' /> 
<style>
  /* source-sans-3-latin-wght-normal */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-italic.woff2) format('woff2-variations');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
 </style>

- Publish and reload the page.
By following these steps, you’ll ensure the correct italic variant is loaded, providing a more accurate representation of the font.