Argento custom fonts

Custom fonts offer more versatility and creativity than standard web fonts and can help a website stand out from its competitors. Custom fonts can also be used to reinforce and enhance a website’s branding and identity. While making Argento customizations often the custom font changes are needed too.

Instructions

To do this you need to follow these few simple steps:

  1. Find your font at Google Fonts i.e. Quicksand. Choose all required parameters and copy the URL.

    In our case it is: 

    https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap

  2. Then you can use the GetFonts tool by VovaYatsyuk to download chosen fonts and styles. Or use any other convenient way to get them.

  3. You’ll need the custom theme to be created also.

  4. Unzip the fonts.zip and put the fonts folder to custom theme web

Example:

web/
 ├─ fonts/
 │  ├─ quicksand/
 │  │  ├─ v30/
 │  │  │  ├─ 6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2
 │  │  │  ├─ 6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2
 │  │  │  ├─ 6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2
 │  │  │  ├─ 6xKtdSZaM9iE8KbpRA_hK1QN.woff2
 │  │  │  ├─ 6xKtdSZaM9iE8KbpRA_hK1QN.woff2
5. Create the file Magento_Theme/layout/default_head_blocks.xml in your custom theme where we’ll call our new fonts.

Next up