Fonts

By default, Atomic Elements makes use of the following Fonts

• Lato (Text Font)
• Material Icons (For the MaterialIcon component & any other components that make use of an icon)
• Material Symbols (Only needed if you want to use the MaterialSybmol component)

Changing Fonts

The font-family and weights are determined by a set of CSS variables. You can override these variables to change the font used by Atomic Elements.

:root {
  --font-family: "Lato", sans-serif;
  --font-weight-light: 200;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
}

Loading Fonts

You can load the fonts from anywhere, but here is an example of how you might load them from Google Fonts.

<!-- Lato is the default text font, you should only need these variants.
You could load a different text-font if you wanted -->
<link
  href="https://fonts.googleapis.com/css2?family=Lato:wght@200;400;700&display=swap"
  rel="stylesheet"
/>

<!-- Material Icons -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

<!-- The default is filled, you only need any of these if you actually intend to use them -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Round"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Sharp"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Two+Tone"
  rel="stylesheet"
/>