# How to use custom fonts with Tailwind CSS

> Learn how to use custom fonts with Tailwind CSS by importing a Google Font in your CSS and setting it as the default font-family inside the base layer.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-05-25 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/how-to-use-custom-fonts-with-tailwind-css/

Assuming you have an app configured to use Tailwind CSS, you’ll have a CSS file that contains

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Go on Google Fonts for example, select a font, and you’ll be provided a `@import` for the CSS font.

For example this for the Inter font in various weights:

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap');
```

Add that to the CSS file, and then add this:

```css
@layer base {
  html {
    font-family: Inter, system-ui, sans-serif;
  }
}
```

In the end, your CSS file will look like this:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap');

@layer base {
  html {
    font-family: Inter, system-ui, sans-serif;
  }
}
```

Now your default font is that one, and you can use `font-bold` for example or `font-medium` to set various sizes.