search

fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.56k stars 331 forks source link

Offline fonts #367

Closed jprateragg closed 2 years ago

jprateragg commented 5 years ago

Feature Request

I absolutely love Semantic-UI/Fomantic-UI. However, one of my biggest gripes with Semantic-UI was it could only be used online. It would be wonderful if there was a way to include the fonts with the repository, npm or build process so they didn't have to be pulled from the internet.

Description

I work for a financial organization and we use Semantic-UI/Fomantic-UI in a few or our internal applications. On the rare occasion that we have internet issues, the fonts can't be loaded, and it essentially makes our applications unusable.

Also, we use another application called PrinceXML to create PDFs from these applications. Because we block all internet traffic on servers, PrinceXML can't pull the fonts/icons when it generates the PDFs.

Example

We currently use the semantic-ui-offline project to get this to work properly: https://github.com/arthurlacoste/semantic-ui-offline

This isn't a deal breaker for us, but would just be nice if the fonts could be saved and served locally without relying on Google for them. Thanks!

Atulin commented 5 years ago

I'd say that using an online font with a fallback to a local copy would be a good usability improvement. It'd also allow for easier creation of Cordova and Electron apps, who are not always being used online.

y0hami commented 5 years ago

Maybe we should define our own @font-face which uses local() which will load fonts locally if they exist. We could then load the Google Fonts import after it which should override our defined @font-face.

Google Fonts already returns the below result which includes the local() definition but that doesn't make much sense if you don't have an internet connection to get it from Google Fonts.

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.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;
}

That being said it would be better overall if we could make it easy enough to define a file location to local font files.

lubber-de commented 5 years ago

@hammy2899 I doubt many people have the Lato font physically installed on their computers resulting in >90% will still try to load from Google. I would rather copy the Lato font into the default themes assets folder (to stay/look backward compatible) This will finally make the framework work completely offline. Beside that, if somebody does not want to use Lato at all without re-compiling Fomantic but still just use the CDN versions, one can simply override this by their own Font-definition after linking the fomantic css (considering we put lato into the framework to avoid loading from google at all):

body,
h1,
h2,
h3,
h4,
h5 {
  font-family: 'MyDesiredFontName';
}
y0hami commented 5 years ago

@lubber-de I do agree with this but my only problem is we would then be shipping FUI with large font files.

Atulin commented 5 years ago

Could it be shipped without the fonts, but with an empty fonts directory? If the font is in the directory – load that copy, if not – load from CDN.

y0hami commented 5 years ago

@Atulin That is not a bad idea, we could look into that.

jamessampford commented 5 years ago

Couldn't the user (site owner) simply alter the CSS file to use a local version (download and create the various required fonts from https://fonts.google.com/specimen/Lato)

On the front end, end user (site consumer) downloads the font, saving it to localStorage and access it that way, with a check done when connected to see if a new version is available then do an update as required

Lots of ways to achieve the same goal

y0hami commented 5 years ago

I don't saving fonts into localStorage would be the best option here and why would you want to introduce JavaScript into loading fonts? Doing so would just add complexity where it isn't needed.

jamessampford commented 5 years ago

I'd thought it might help with the offline/no internet scenario - but then, depends how the site/application is served in the first place to the end user. If it is purely intranet based, then no need for localStorage like you said

y0hami commented 5 years ago

@jamessampford I think what people mean by offline is no internet connection but they are still on a local network.

jprateragg commented 5 years ago

I'm glad to see I'm not the only one who would like this functionality. As it stands, we have a workaround for printing our documents since we don't allow internet access to any of our servers. But, I'd like to be able to remove that workaround since it's literally only used when printing documents when the servers can't access the internet to get the fonts. I like @Atulin's idea about having an empty fonts directory and if the font exists, then it's used instead of pulled from Google fonts.

prudho commented 5 years ago

It may be more simple to just change the default font in the default theme. On every FUI related project I use my first action is to disable it in my src\site\globals\site.variables file:

@headerFont        : BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
@pageFont          : BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

@emSize            : 14px;
@fontSize          : 14px;
@importGoogleFonts : false;

And general theme does not looks more ugly in my eyes...

Lato

4334affbf0e5964a89a61059661a1080.md.png

Local Font

cb34e2bbabe1de587d6b82b8d3f61ea9.md.png

Advanced user still have the ability to change and load they own fonts, and no more complaints on Fomantic-UI CSS files anymore !

Just my 2 cents...

y0hami commented 5 years ago

@prudho I can kinda get behind this. Bootstrap do also use system fonts

https://getbootstrap.com/docs/4.2/content/typography/#global-settings

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L271

IMO I think this should just wait until v3 since any decision we make will probably lead to a breaking change and a breaking change with fonts will affect all users.

lubber-de commented 5 years ago

Yes, this is what we would have to do

If FUI is used via CDN the whole offline discussion is obsolete and the google fallback works as before

We can also think of completely omitting the default lato-font at all as @prudho suggested, and set the default global font to local OS Systemfonts as discussed in https://github.com/necolas/normalize.css/issues/665

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

Then at least we have to provide some simple docs, how the users can get back the Lato-Font, if desired (by a simple include of another css file or even a little codesnippet)

@hammy2899 is right, either way, it's a breaking change thats need a minor version upgrade, but not necessarily 3.0.0

huseyinkozan commented 5 years ago

Please consider embedded OS'es that have no much storage, and not force to dowload 21MB font files.

y0hami commented 5 years ago

@huseyinkozan Could you please elaborate on what you mean by

OS'es that have no much storage

Do you mean the host or the client?

If the changes suggested go a head it will be up to the develop for what fonts they want to use and won't be forced by the framework.

huseyinkozan commented 5 years ago

@hammy2899

As a host. For ex; I have used Semantic-UI within a Tessel 2 which serves a device interface over wifi access point.

I prefer directly use library without rebuild, if it possible.

y0hami commented 5 years ago

@huseyinkozan If the change does go forward you will still be able to use it via CDN but it wont include the fonts and will use the system defaults as mentioned above.

Personally I want to wait until v3 to do this change so its not as big of a change for current users and then it would be part of the migration process. It will also allow for users like yourself to make themes a lot easier without the current build process meaning you can include the fonts without rebuilding.

VishwaJay commented 5 years ago

@hammy2899 Just more fuel for the fire:

Because of overrides, it makes local fonts more complex to handle, if we can't simply compile them into LESS. And using the UI would make development of the web app far simpler, faster, and easier-to-maintain. Having the ability to load local font files not found in a CDN would also allow non-internet apps (such as on the company intranet or in a local-net firewalled environment) to handle having fonts available that aren't loaded on end machines.

Loading it from a local file resource makes sense to me. For testing, I'd recommend considering the free typewriter (e.g., monospace) font "Courier Prime" which isn't found on Google, but which a lot of screenplay enthusiasts seem to be liking for their stuff. It's also becoming an industry-standard font for movie-making, from what I gather. But this is another example where it might be useful.

Thanks!

lukey78 commented 3 years ago

How is semantic-ui-offline doing this?

One more thing to consider: Here in Europe requiring users to download fonts from non-EU servers is considered problematic, because it allows user tracking. That's why I try to serve all the resources in my web app locally from my server in Germany.

Would be great if that makes it into this library.

But as I don't want to wait for the stable 3 version: Is there a way to prevent the font downloading and serve the same fonts locally - WITHOUT recompiling the whole thing?

VishwaJay commented 3 years ago

One more thing to consider: Here in Europe requiring users to download fonts from non-EU servers is considered problematic, because it allows user tracking. That's why I try to serve all the resources in my web app locally from my server in Germany.

This implies that any other activity is not tracked? How does that possibly work?

As I recall, Google fonts are mirrored on servers worldwide, thus they would technically be EU-based.

But as I don't want to wait for the stable 3 version: Is there a way to prevent the font downloading and serve the same fonts locally - WITHOUT recompiling the whole thing?

I wouldn't imagine so. But a recompile is fairly trivial. But if you insist on not recompiling, all you'd have to do is edit the CSS to serve the local fonts instead of downloading from Google (or whomever). With a bit of digging through search engines, it's not hard to figure out (it took me all of 2 hours to learn, and I have several sites that need locally-hosted fonts).

Hope this helps.

lubber-de commented 3 years ago

But as I don't want to wait for the stable 3 version: Is there a way to prevent the font downloading and serve the same fonts locally - WITHOUT recompiling the whole thing?

If you really cannot recompile Fomantic by yourself, but have the files stored locally on your server, then just edit your local copy of semantic.css and remove or replace the first @import url from the google fonts url to your desired font file and CSS font family clarification. Then you can simply override all elements with your own font family by 

*:not(i){font-family:'yourfont' !important;}
InfoLibre commented 2 years ago

You could use:

huseyinkozan commented 2 years ago

Yet another offline fork;

Note; Install command which is at the center is wrong. Use at the right one.

lubber-de commented 2 years ago

Fixed and implemented by #2359