search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
459 stars 83 forks source link

Use locally installed Roboto font instead of using Google fonts by default #2435

Open heruan opened 6 years ago

heruan commented 6 years ago

It took me a while to catch this, but debugging a slow page load I've found the cause to be this line in typography.html:

<!-- Import Roboto from Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" crossorigin="anonymous">

If a Vaadin app is used without Internet access or behind a captive portal, an external dependency like this might slow down page load or even throw errors.

P.S. I'm not even using vaadin-material-styles, but somehow it comes along with other dependencies via Flow webjars.

jouni commented 6 years ago

Oh, are we importing that by default in our Material theme? Seems risky. I would avoid that, and leave as an option for the developer.

heruan commented 5 years ago

Any update on this? Still causes major trouble for apps without internet access, event when not using Material (why so?).

web-padawan commented 5 years ago

We could use this dependency: https://github.com/choffmeister/roboto-fontface-bower

heruan commented 5 years ago

Still not clear to me why the browser makes that request even if I'm not using the Material theme.

web-padawan commented 5 years ago

Yes that's weird. Can you reproduce this without Flow, using web component only?

pekam commented 5 years ago

@heruan does it fix the problem if you exclude the maven dependency?

<groupId>com.vaadin</groupId>
<artifactId>vaadin-material-theme</artifactId>
heruan commented 5 years ago

Turns out this is happening only when bundling the Flow app for production: the unused files are loaded from the bundle. In development mode it doesn't happen.

pekam commented 5 years ago

Yeah, IIRC the Flow bundler scans for all the HtmlImports it finds in the classpath and adds them to the main bundle. So AFAIK the easiest way to exclude a non-used html-file is to exclude the maven dependency that imports it. Maybe it's also possible by moving the non-used imports into a separate fragment.

web-padawan commented 3 years ago

Reopened and moved to the monorepo, as the original PR https://github.com/vaadin/vaadin-material-styles/pull/78 was never released 😞

web-padawan commented 3 years ago

Solution proposal:

  1. Use @fontsource/roboto to get font files and CSS files, and update it regularly to get newer versions
  2. Update the gulpfile.js in Material styles package to create css tagged literals using rollup-plugin-lit-css
  3. Update Material theme integration in Flow components to make sure it includes font files appropriately