S&box Wiki

Revision Difference

Fonts#544617

<cat>Code.Misc</cat>⤶ <title>Adding custom fonts</title>⤶ ⤶ To use a custom font add a new font to `addons/your-addon/fonts` where `your-addon` is the name of your addon. It can then be used in your stylesheet using `font-family: FontName`. Note that you do not include the file extension. For clarification; in this example the font would be called `FontName.ttf`. ⤶ Note: If you load your stylesheet using `StyleSheet.Load("ui/your-stylesheet.scss");` fonts do not hotload and therefore you will need to restart your game before you can use the font in your addon. Append a slash to the path to enable hotloading like this `StyleSheet.Load("/ui/your-stylesheet.scss");`<cat>Dev.UI</cat>⤶ <title>Fonts</title>⤶ ⤶ You can add your own fonts by placing them in the fonts folder within your addon, both otf and ttf files are supported. ⤶ To use your font you should set the `font-family` on your text so that it matches the font family name of your files.⤶ ```⤶ font-family: FontFamilyName;⤶ ```⤶ ⤶ <note>This differs from normal CSS syntax, this should be a single font name and not multiple.</note>⤶ ⤶ You shouldn't need to worry about how they're named as most fonts you download should be named like this anyway, but incase you run into any trouble your fonts will be searched for in this order:⤶ ⤶ * `/fonts/FontFamilyName-FontWeightFontStyle.ttf`⤶ * `/fonts/FontFamilyName-FontWeight.ttf`⤶ * `/fonts/FontFamilyName.ttf`⤶ ⤶ Where:⤶ ⤶ * FontFamilyName is: A shared name across each weight/style of your font.⤶ * FontWeight is: Thin, ExtraLight, Light, Regular, Medium, Semibold, Bold, ExtraBold, Black⤶ * FontStyle is: Empty or `Italic`⤶ ⤶ Here's an example of a correct layout of fonts:⤶ ⤶ <upload src="a5727/8d951ff31dc234d.png" size="75523" name="image.png" />⤶ ⤶ To use `SourceSansPro-BoldItalic.ttf` you would use the CSS:⤶ ⤶ ```⤶ font-family: SourceSansPro;⤶ font-weight: bold;⤶ font-style: italic;⤶ ```