Magento 2 – Utilizzare Font Custom

Vediamo oggi come aggiungere font custom al nostro tema su Magento

Per prima cosa aggiungiamo i font nella directory del nostro tema app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts

Andiamo in seguito a definire la nostra regola @font-face. Per fare questo nel file

src/app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less

inseriamo le seguenti istruzioni

& when (@media-common = true) {
  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-ExtraLight',
    @font-weight: 200,
    @font-style: normal,
    @font-display: swap
  );

  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Light',
    @font-weight: 300,
    @font-style: normal,
    @font-display: swap
  );

  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Regular',
    @font-weight: 400,
    @font-style: normal,
    @font-display: swap
  );

  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-Bold',
    @font-weight: 700,
    @font-style: normal,
    @font-display: swap
  );

  .lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/BioRhyme/BioRhyme-ExtraBold',
    @font-weight: 800,
    @font-style: normal,
    @font-display: swap
  );
}

Questo codice andrà a creare le seguenti regole nel file style-m.css

@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-ExtraLight.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-Light.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-Regular.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-Bold.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BioRhyme';
  src: url('../fonts/BioRhyme/BioRhyme-ExtraBold.woff2') format('woff2'), url('../fonts/BioRhyme/BioRhyme-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

Andiamo in fine a sovrascrive il font che desideriamo con la nostra font-family. Ad esempio se vogliamo sovrascrivere il font principale del tema blank (che probabilmente staremo estenendo) aggiungiamo le seguenti direttive nel file _theme.less

//
//  Fonts
//  ---------------------------------------------

@font-family-name__base: 'BioRhyme';

In alternativa possiamo embeddarli da link esterni esempio se vogliamo utilizzare le font di Google Font https://fonts.google.com/

Modifichiamo il file seguente

src/app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Theme/layout/default_head_blocks.xml

inserendo il codice

<!-- Google Fonts -->
<link src="https://fonts.googleapis.com/css2?family=BioRhyme:wght@300;400;700" rel="stylesheet"  src_type="url" />