# Fonts and icons

The point of the Jambonz UI library is for jambonz apps to be "on brand" and share a cohesive 
foundational design system. With that in mind, the official font family for jambonz is called 
[Objectivity](https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family). Objectivity 
is a free, open-source font available for download online. The UI kit provides the font files 
already optimized for web use in the `woff` format. Jambonz doesn't utilize every member of the 
font family but you can view the full font specimen [here](https://www.fontsquirrel.com/fonts/objectivity).

##### Available fonts for web use:

| Font | File | SASS Variable |
|------|------|---------------|
| Objectivity Regular | `objectivity-regular-webfont.woff(2)` | `$font-regular` |
| Objectivity Regular Slanted | `objectivity-regularslanted-webfont.woff(2)` | `$font-regular-italic` |
| Objectivity Medium | `objectivity-medium-webfont.woff(2)` | `$font-medium` |
| Objectivity Medium Slanted | `objectivity-mediumslanted-webfont.woff(2)` | `$font-medium-italic` |
| Objectivity Bold | `objectivity-bold-webfont.woff(2)` | `$font-bold` |
| Objectivity Bold Slanted | `objectivity-boldslanted-webfont.woff(2)` | `$font-bold-italic` |

##### Loading the fonts

Fonts can be copied from the package to your static public directory. This can be done manually, 
at installation time or during app bundling depending on your preference. The package provides a 
singular `public` directory that consists of all static assets: CSS, JS and fonts. You can literally 


You can even support browser `preload` for the fonts which will optimize the performance even more 
since the UI library ships with `font-display: swap` already. In your HTML `<head>` you can add some 
variation of this depending on which fonts render above the fold.

```html
<link rel="preload" href="/fonts/objectivity-medium-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
<link rel="preload" href="/fonts/objectivity-bold-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
<link rel="preload" href="/fonts/objectivity-regular-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
<link rel="preload" href="/fonts/objectivity-boldslanted-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
<link rel="preload" href="/fonts/objectivity-regularslanted-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
```

##### Examples

For this [Next.js](https://nextjs.org/) app you're on right now we do this with the `postinstall` 
script in the `package.json` file. We are also opting to ignore the `fonts` directory inside of 
`public` since the fonts are always copied during `install` which works locally and in CI.

```json
{
  "scripts": {
    "postinstall": "rm -rf public/fonts && cp -R ./node_modules/@jambonz/ui-kit/public/fonts ./public/fonts"
  }
}
```

Of course you can serve them statically in development and bundle them at build time if 
you're using a tool like [webpack](https://webpack.js.org/). See the documentation on 
[devServer](https://webpack.js.org/configuration/dev-server/#devserverstatic) and check 
out the [copy-webpack-plugin](https://www.npmjs.com/package/copy-webpack-plugin) for resources 
on how to handle this.

Example of dev server config:

```js
module.exports = {
  // ...
  devServer: {
    static: [path.resolve(__dirname, 'node_modules/@jambonz/ui-kit/public')],
  },
};
```

Example of copy plugin config:

```js
module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'node_modules/@jambonz/ui-kit/public'),
          // If you would like to omit the CSS/JS and only copy fonts
          globOptions: {
            ignore: ['**/css/**', '**/js/**'],
          },
        },
      ],
    }),
  ],
};
```

##### Feather icons

Jambonz UI utilizes [feathericons](https://feathericons.com/), an open-source icon library available 
in many formats for implemention into frontend stacks. Feather has 280+ available icons and the UI 
library is designed to work with [react-feather](https://github.com/feathericons/react-feather). 
By default the UI library doesn't import any icons from feather, however it declares `react-feather` 
as a peer dependency. This means you can import just the icons you are using in your jambonz app. 
This allows for [tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) to 
ake effect and ensures we don't load extra bloat into our dist JS that isn't explicitly used. There 
is an [Icon component](/docs/jambonz-ui/components/) that renders a stylized design icon with many 
visual variations.

You can see how we import the feather icons used on this site 
[here](https://github.com/jambonz/next-static-site/blob/main/src/components/icons.js).

<p class="flex">
<a href="/docs/jambonz-ui/">Prev: Getting started</a>
<a href="/docs/jambonz-ui/styles/">Next: Styles</a>
</p>