How to get theme without dependency on amazonaws? about grommet-theme-hpe HOT 4 CLOSED

Hi @blakehilliard, this is an interesting question. There may be a few work arounds but the easiest may be creating a custom theme based off the HPE theme. With this approach your HPE theme will stay version controlled and up-to-date.

import { hpe } from 'grommet-theme-hpe';
import { deepMerge } from 'grommet/utils';
import { Grommet } from 'grommet';

const theme = deepMerge(hpe, {
  global: {
    font: {
      family: "'Metric', Arial, sans-serif",
      face: `
        @font-face {
          font-family: "Metric";
          src: url("/public/MetricHPE-Web-Regular.woff") format('woff');
        }
        @font-face {
          font-family: "Metric";
          src: url("/public/MetricHPE-Web-Bold.woff") format('woff');
          font-weight: 700;
        }
        @font-face {
          font-family: "Metric";
          src: url("/public/web/MetricHPE-Web-Semibold.woff") format('woff');
          font-weight: 600;
        }
        @font-face {
          font-family: "Metric";
          src: url("/public/MetricHPE-Web-Light.woff") format('woff');
          font-weight: 100;
        }
      `,
    },
  },
});

export const MyApp = () => <Grommet theme={theme}></Grommet>;

In this approach we assume you have a static assets directory in your web app titled /public that is serving the .woff files. You can find the font file links in the src.

If you do not have a static assets directory in your app you could take a more advanced approach by base64ing the fonts and putting the output directly in the src field of the @font-face definition.

from grommet-theme-hpe.

This is my theme.js file

and this one is my main.css file

while I am using this way my font works properly.
Thanks!

from grommet-theme-hpe.

Looks like you're good to go. Let us know if you have any other questions!

from grommet-theme-hpe.

Yes! this link help me partially. Whenever I had to use global--> font--> family and face both keys and values so it was not working while I had use only family key and value here and font-face defined in my main.css file so its work properly.

Thanks for your response.

from grommet-theme-hpe.