[build] self-hosting 'lato' font rather using google-font

[dutrieux]

I try to self-hosting 'lato' font rather using google api, I do that :

• From the url : https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400%3B0,700%3B1,400%3B1,700&subset=latin&display=swap, I download all fonts :
  https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHjxsAUi-qJCY.woff2 -> lato_italic_400_ext.woff2
  https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHjxsAXC-q.woff2 -> lato_italic_400.woff2
  https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI5wq_FQft1dw.woff2 -> lato_italic_700_ext.woff2
  https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI5wq_Gwft.woff2 -> lato_italic_700.woff2
  https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXjeu.woff2 -> lato_normal_400_ext.woff2
  https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2 -> lato_normal_400.woff2
  https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwaPGR_p.woff2 -> lato_normal_700_ext.woff2
  https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPGQ.woff2 -> lato_normal_700.woff2

• I dowload too https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400%3B0,700%3B1,400%3B1,700&subset=latin&display=swap -> latofonts.css

• I put all *.woff2 to <fomantic-ui install>\src\themes\myTheme\assets\fonts\

• I put latofonts.css to <fomantic-ui install>\src\themes\myTheme\assets\

• I modify latofonts.css to change the path of all *.woff2 file like this :

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./themes/myTheme/assets//fonts/lato_italic_400_ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./themes/myTheme/fonts/lato_italic_400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
...

• I create new file site.variables in <fomantic-ui install>\src\themes\myTheme\globals\ directory like this :

/*******************************
     User Global Variables
*******************************/

@importGoogleFonts : false;

• create new file 'site.overrides' in <fomantic-ui install>\src\themes\myTheme\globals\ directory like this :

/*******************************
        Global Overrides
*******************************/

@import  (inline) "../assets/latofonts.css";

• I modify theme.config in <fomantic-ui install>\src\ to change the @site element :

/* Global */
@site       : 'myTheme';

• I build fomanticUI project :

> npx gulp build

But if a check the semantic.css in dist directory, there isn't the @import url('./themes/myTheme/assets/latofonts.css')

Maybe I missing something or it's not the good way to do that.

[lubber-de]

🤔 This all sounds like the very correct way to do it... i can only think of a typo somewhere

[lubber-de]

You may try
@import (css) url('./themes/myTheme/assets/latofonts.css')
instead of
@import url('./themes/myTheme/assets/latofonts.css')

in your site.overrides

[dutrieux]

I try : no change.

I think there is a problem, the modification of element @site in theme.config is not considered : @lubber-de could you try with your version to change element @site

[ko2in]

@dutrieux I guess, you'll have the content from your /themes/myTheme/assets/latofonts.css in semantic.css, not the @import definition. The @import statement is only used inside component specific CSS file dist/components/site.css after the build process.

[lubber-de]

According to http://lesscss.org/features/#import-atrules-feature-file-extensions your import statement is totally fine, because it ends with css..

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a Less file
@import "foo.css";  // statement left in place, as-is

But there is

inline: include the source file in the output but do not process it

so please try @import (inline) url('./themes/myTheme/assets/latofonts.css')

[dutrieux]

Thank for your reply @ko2in : on which line I need semi-colon ?

[ko2in]

@dutrieux Your import statement has no semi-colon as you posted:

@import url('./themes/myTheme/assets/latofonts.css')

Did you miss here or also don't have in your project file?

[dutrieux]

@ko2in good catch : that works, I modify my first post to adjust all changes

[dutrieux]

@ko2in that work find, but I would liked to use the file latofonts.css copied in the directory 'dist/themes/myTheme/assets/' but I don't fund a solution. The build process add the content of latofonts.css in semantic.css.
I would like a line in semantic.css like this :
@import "./themes/myTheme/assets/latofonts.css";

[ko2in]

@lubber-de suggestion @import (inline) url('./themes/myTheme/assets/latofonts.css'); works as expected, you'll see that your latofonts.css is included in dist/components/site.css. Here's mine:

But, I don't think you'll have the @import statement as in the site.css because, the build task compiles the imported files from individual component and bundles into semantic.css as a single file. Since, all your CSS rules are in semantic.css, I don't see any reason to import the file via @import statement.

If you would like to stick with the @import, then I think you can do as follow:

• Exclude the site component from semantic.css (You can configure with components array in semantic.json file)
• Run build task
• Then use your dist/components/site.css as another link tag in your page

Your fonts will be imported in site.css that way. Hope it helps.