# Custom CSS and font

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/help/writerside/llms.txt).

Besides the [built-in customization options](customize-the-look.html), which are rather limited, Writerside allows you to embed a custom CSS file that will override the font, color, size, spacing, and any other visual presentation of web pages.

Procedure: Use custom CSS

1. Save your CSS file in the `static` subdirectory of the  [build configuration directory](help-modules.html#build-config-dir) . For example, `cfg/static/custom.css` with the following sample code:

```CSS
/* set the main background for the light theme to pink */
:root {
    --wh-color-bg-main: rgb(255, 198, 227);
}

/* make the border for images transparent with a 30px radius */
.article__img {
    border-radius: 30px !important;
    border: none;
}
```

2. Open  `[buildprofiles.xml](buildprofiles-xml.html)`  and add the  `[<custom-css>](buildprofiles-xml.html#custom-css)`  element under  `[<variables>](buildprofiles-xml.html#variables)`  with the name of the custom CSS file.

```XML
<variables>
    <custom-css>custom.css</custom-css>
</variables>
```

3. [Preview](preview-topics.html) any topic and make sure that the customization is applied.

Procedure: Change the font

* If you want to use only system fonts, you can define them for various classes in the [custom CSS file](#use-custom-css). For example, to use a lightweight `Comic Sans MS` font for titles and regular `Times New Roman` for paragraphs:

```CSS
.title__content {
    font-family: "Comic Sans MS";
    font-weight: lighter;
}

.article__p {
    font-family: "Times New Roman";
}
```

* If you want to bundle a custom font with your help website, save your font file in the `static` subdirectory of the  [build configuration directory](help-modules.html#build-config-dir) . For example, `cfg/static/Baskervville-Regular.ttf`. Then define a new font face in the [custom CSS file](#use-custom-css) and use it for whatever classes you want.

```CSS
@font-face {
    font-family: Baskervville;
    src: url(Baskervville-Regular.ttf);
}

.title__content {
    font-family: Baskervville;
}
```

* If you want to use a font hosted externally, you can [import](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) it at the beginning of your custom CSS file. For example, to use [Matemasie](https://fonts.google.com/specimen/Matemasie) for titles:

```CSS
@import url('https://fonts.googleapis.com/css2?family=Matemasie&display=swap');

.title__content {
    font-family: "Matemasie";
}
```