Add A Custom Font To The Flow Theme - Version 31.0.2

Hello Community,

does someone know how to implement a custom Font, when I use the flow theme?

Font is Sailec (Bold, Light, Medium, Regular)

I added to the custom.css in the asset folder the following code and uploaded the woff and woff2 in the asset folder but it did not work:

/**
 * @license
 * MyFonts Webfont Build ID 4547482, 2022-03-16T16:13:01-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Sailec-Bold by Type Dynamic
 * URL: https://www.myfonts.com/fonts/typedynamic/sailec/bold/
 * 
 * Webfont: Sailec-Light by Type Dynamic
 * URL: https://www.myfonts.com/fonts/typedynamic/sailec/light/
 * 
 * Webfont: Sailec-Medium by Type Dynamic
 * URL: https://www.myfonts.com/fonts/typedynamic/sailec/medium/
 * 
 * Webfont: Sailec-Regular by Type Dynamic
 * URL: https://www.myfonts.com/fonts/typedynamic/sailec/regular/
 * 
 * 
 * Webfonts copyright: Copyright © 2014 by Type Dynamic. All rights reserved.
 * 
 * © 2022 MyFonts Inc
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/45639a");
  
@font-face {
  font-family: "Sailec-Light";
  src: url('font_-_SailecLight.woff2') format('woff2'), url('font_-_SailecLight.woff') format('woff');
}
@font-face {
  font-family: "Sailec-Regular";
  src: url('font_-_SailecRegular.woff2') format('woff2'), url('font_-_SailecRegular.woff') format('woff');
}
@font-face {
  font-family: "Sailec-Bold";
  src: url('font_-_SailecBold.woff2') format('woff2'), url('font_-_SailecBold.woff') format('woff');
}
@font-face {
  font-family: "Sailec-Medium";
  src: url('font_-_SailecMedium.woff2') format('woff2'), url('font_-_SailecMedium.woff') format('woff');
}

.SailecBold {
	font-family: "Sailec-Bold";
}.SailecLight {
	font-family: "Sailec-Light";
}.SailecMedium {
	font-family: "Sailec-Medium";
}.SailecRegular {
	font-family: "Sailec-Regular";
}

h1, h2, h3, h4, h5 {
	font-family: "Sailec-Bold";
}

Thx for your help

1 Like

@FlorianSchweitz

yes that current but can you please upload each type all fonts file

TTF, OTF, WOFF, WOFF2, SVG

@KetanKumar if only have the woff/2 and the otf files.

@FlorianSchweitz

oh sorry but its requires to all bcz all browsers different OS if don’t have this generate

https://www.fontsquirrel.com/tools/webfont-generator