How could I use semantic-ui offline?

[zhaozhiming]

Hi all,
I found semantci-ui since 1.0 version will to find the font on google web site, but for some reasons I can't visit google web site, so I get the error below.
My question is: how could I use semantic-ui offline, and don't need to get some other thing on web, just use the semancti.css and semantic.js?

Thanks.

@import 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin';

[p-hennessy]

You would need to download the font itself and change the link in the CSS file to point to your copy of it.

You can do this either by manually editing the CSS file directly, or compile from src using Gulp. If choosing the latter, you need to change the font variables in the src/themes/default/globals/site.variables file

I ran into this problem myself when I wanted to use a custom font. Good luck!

[jlukic]

@importGoogleFonts: false;

in your site/global/site.variables/

then add your own font-face rules (or none) in site/global/site.overrides.

Fonts will default to Helvetica Neue or Arial which are readily available if Lato is not.

Compile with any less compiler, or use our build tools.

[zhaozhiming]

Thank you all, I change it already.

[mikocot]

I cannot really find any information about clean way to customized the web font used by semantic. I can easily change the font imported from google, but I would like to serve the fonts hosted locally and therefore need to override the @font-face. I could locate the @headerFont and @pageFont, but they seem to refer to the css font family attribute.
I could specify the @font-face src in the site.override, but as far as I know it should appear at the top of the .css file, and not at the end. Any suggestions here?

[binarytrails]

Thanks @jlukic! You can locate the src/site/ folder by looking in semantic.json generated during installation and don't forget to rebuild semantic after with gulp build command in the semantic/ folder.

$ cat semantic.json 
{
  "base": "semantic/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
...
$ cat semantic/src/site/globals/site.*
/*******************************
         Site Overrides
*******************************/
@font-face
{
}
/*******************************
     User Global Variables
*******************************/
@importGoogleFonts: false;

[120dev]

An easy way to get google fonts locally, is with this package :

https://www.npmjs.com/package/google-fonts-offline

[kentoj]

Does anyone have any examples of pointing Semantic to a local copy of fonts? I have the font downloaded and I see here how to define a @font-face yet I do not know how to link that up with Semantic.

Will someone post an example here just so I can fill this hole in my knowledge?

[huseyinkozan]

Please fix this issue. We are using SemanticUI at a embedded device which works as stand alone AP. Due to this dependency, I we cannot simplify our release production.

[skleeschulte]

@huseyinkozan This is what I did:

• Downloaded Lato ttf files from fonts.google.com

• Uploaded Lato-Regular.ttf, Lato-Italic.ttf, Lato-Bold.ttf and Lato-BoldItalic.ttf to Font Squirrel Webfont Generator

• Used the following configuration for the generator (most importantly select CSS: Style Link)

  {
  "mode": "expert",
  "formats": [
  "ttf",
  "woff",
  "woff2",
  "eotz",
  "svg"
  ],
  "tt_instructor": "keep",
  "fix_vertical_metrics": "N",
  "metrics_ascent": "",
  "metrics_descent": "",
  "metrics_linegap": "",
  "fallback": "none",
  "fallback_custom": "100",
  "options_subset": "none",
  "subset_custom": "",
  "subset_custom_range": "",
  "subset_ot_features_list": "",
  "style_link": "Y",
  "css_stylesheet": "stylesheet.css",
  "filename_suffix": "-webfont",
  "spacing_adjustment": "0",
  "rememberme": "Y"
  }

• Saved the font-files (.eot, .svg, .ttf, .woff, .woff2) alongside the stylesheet.css file (all contained in the zip-file from the Webfont Generator) to a folder in my project

• Added @importGoogleFonts: false; to site/global/site.variables

• Added an import statement to site/global/site.overrides to import the stylesheet.css file generated by the Webfont Generator (it contains the @font-face definitions): @import 'path/to/stylesheet.css';

Of course you have to make sure that the browser can find the files that are referenced in stylesheet.css. I use all of this in a Webpack 2 setup with file-loaders for the font files and semantic-ui-less-module-loader for the less files from semantic-ui-less.

[arthurlacoste]

I have made a fork for this issue : https://github.com/arthurlacoste/semantic-ui-offline

You can use this for the css with fonts included :

npm i semantic-ui-offline

[huseyinkozan]

@arthurlacoste Thanks. Will you continue to support newer versions ?

[arthurlacoste]

@huseyinkozan yes, I've made a script to handle any change. 🍸

[Tony427]

Hi, I am using emantic-ui with dotnet core by nuget. I can't modify site/global/site.variables change to offline. Anyone have idea?