<cat>UI.Intro</cat> <title>Custom Fonts</title> # Using fonts ⤶ You can use custom fonts in razor by placing `.otf` or `.ttf` files in `Assets/fonts`. Do not nest your fonts in subfolders, as they will fail to load properly. ⤶ To use your font, set `font-family` in your CSS to the name of your font. ⤶ <warning>- Variable fonts currently are not supported in s&box. If you'd like to use custom fonts, they **must** be static. - Nesting folders in the root is not currently possible, so you **must** store all folders in the `/fonts` root directory. </warning>⤶ S&box supports custom fonts. These fonts must be stored as an `.otf` or `.ttf` file, and placed into `Assets/fonts`. ⤶ ⤶ In order to use your font, you will need to set `font-family` in your CSS to the name of your font. Deviating from standard CSS syntax, only should only enter **one** font family at a time, as fallback font families are unavailable.⤶ ``` font-family: Font Family Name; font-family: Poppins; /* You can only refer to one font family at a time. */⤶ ``` ⤶ <note>⤶ Differing from normal CSS syntax, only enter a single font name instead of multiple.⤶ </note>⤶ ⤶ <warning>Variable fonts currently are not supported in s&box!</warning>⤶ ⤶ # Uploading fonts⤶ ⤶ ⤶ # Uploading fonts⤶ For your players to download your fonts you may need to configure your Resource Files manually. Open the [Project Settings](https://wiki.facepunch.com/sbox/Games/ProjectSettings) > Resource Files, and add a wildcard `fonts/*`. After you've added that wildcard, you should see your font highlighted in a brighter color on the right side. <upload src="2a1e9/8dd341b6d249fbe.png" size="41632" name="image.png" />