A Comprehensive Guide to Loading, Customizing, and Enhancing Font Performance in PicoStrap

One of the most important aspects of choosing a website design is selecting the fonts.

However, how these fonts are loaded is equally crucial, especially in compliance with GDPR. In the latest version of PicoStrap, we have managed to address all three issues. We’ve ensured that all websites created with LiveCanvas and Picostrap can benefit from these solutions.

Launch the new picostrap customizer

 

So, in the new version of picostrap, you’ll find a new panel that lets you choose and add Google Fonts to your website.

You can search for them by name with a text input or filter them by category, like handwritten, sans-serif, serif, etc.

Advantages of Variable Google Fonts

The big new feature introduced in the new picostrap theme is the filter that allows you to select either variable fonts or static fonts exclusively.

Variable Google Fonts offer several key benefits that make them an excellent choice for web designers and developers:

Versatility: With a single font file, you can access a wide range of weights and styles. This means you can go from thin to bold or regular to italic without having to load multiple font files.

Performance: By using one font file that contains all variations, you significantly reduce the number of HTTP requests, leading to faster page load times and improved performance.

Design Flexibility: Variable fonts provide greater design flexibility. You can create responsive typography that adapts to different screen sizes and resolutions seamlessly. This ensures that your text looks great on any device, from mobile phones to large desktop monitors.

Consistency: Maintaining a consistent visual style across your website becomes easier with variable fonts. You can ensure that all text elements are harmonized, enhancing the overall aesthetic appeal.

Customization: Variable fonts allow for fine-tuned control over typography, letting designers adjust specific attributes like weight, width, and slant dynamically. This opens up new creative possibilities and allows for unique typographic expressions.

Efficiency: Instead of managing multiple font files for different styles, a single variable font file simplifies font management and can lead to reduced file size compared to multiple separate font files.

The jsdelivr CDN to efficently load font

 

The integration service is provided through Fontsource. This method of font loading significantly enhances speed, ensuring that your website’s page performance remains unaffected (refer to the code example below in the article).

The fontsource has teamed up with jsDelivr to offer a custom proxy for all its font files, catering to specialized use cases where a stable font file link is necessary.

Choose Google fonts in picostrap

Now, let’s see how to load the fonts and what the new interface looks like. First, launch the picostrap customizer and click Typography and click on Choose Font.

A new window will appear where you can scroll through the various fonts and filter them by category or by whether they are variable or not.

Additionally, you can search for fonts, but remember that since they are loaded in real-time, you might need to wait a few seconds to see them displayed in the window.

Once a font is selected, a short SCSS compiler action will run, allowing you to see the fonts in action on the page or  better on a Style Demo page, showing their real impact on your design.

Go Further: Step By Step on how to Load Font Variants (Italic) and Special Subsets (e.g., Cyrillic, greek and other Latin-extended Languages).

 Let’s address some questions from our Discord on how to load font variants and special characters for sites in languages other than English or German, etc. So, let’s dive into that together.

Loading Subsets: A Practical Example (polish language)

Let’s see how to load and extend the Font subsets.

In this example, we have a poem written in Polish. As you can see, if we load the Google Font “Josefin Sans” through PicoStrap, it won’t fully support Polish diacritical marks.

Here’s a screenshot of how the text will appear:

 

To resolve the issue and ensure that all characters of the font are loaded correctly, follow these steps:

1. Disable the Font Loading in Header and manage the code in the Header

Go to the customizer under the "Header/Footer Code" section and check the "Disable the Font Loading in Header" option. This allows you to manually manage the font loading code for maximum control.

Copy all the code from the "Font Loading Header Code" input field to use as a base for modifications. Paste this code into the "Add Code to Header" field.

3. Select Font Subsets:

• Navigate to Fontsource and go to the page for the "Josefin Sans" font.
• Click on the "CDN" button and enable the subsets you need, in this case, "latin-ext."
• Copy the generated CSS.

4. Modify Customizer Code and publish the changes

• Return to the customizer and replace all existing code in the style section with the copied CSS.
• Ensure to change the font name from font-family: 'Josefin Sans Variable'; to font-family: 'Josefin Sans'; to match the variable name used by PicoStrap.
• Wait for PicoStrap to update the style and click the "Publish" button.
• Refresh the page to allow PicoStrap to load the injected code into the header. You should now see all characters displayed perfectly!

Adding Italic Variants

Sometimes, it can be useful to add the italic variant for certain fonts, especially when the italic version is significantly different from the one rendered by browsers.

In this case, the steps are similar to what we've done for subsets, with a small adjustment:

1. Select Italic Variant
   - Go to the  https://fontsource.org/ page for your desired font.
   - In the CDN section, go to "Variants" and click the "Italic" button.
2. Copy Generated CSS code and Insert it in Customizer
   Paste this copied CSS into the "Add Code to Header" input field in your customizer.
   Remember to fix the Font-family name (eg font-family: 'Source Sans 3 Variable'; comes font-family: 'Source Sans 3';

By following these steps, you'll ensure the correct italic variant is loaded, providing a more accurate representation of the font.