Cogent Core Docs

0%

Loading...

Static preview:

Font

Apps come with the default fonts of Noto Sans and Roboto Mono. Apps automatically use system fonts for international text and emojis, so all characters are rendered in some font if possible. You can add custom fonts to your app on all platforms.

Styles

To specify the font used for text, see font family styles.

Custom fonts

Note: after you get your custom font set up by following the steps below, see font family styles for how to use it.

Desktop and mobile

To add a custom font to your app, you need one or more .ttf (TrueType Font) files (.otf files also work). We currently do not support variable fonts, although we plan to at some point.

    1. Place all of your .ttf files in a new folder in your app directory called myfontname (ex: opensans).

    2. Make a new file in your app directory called myfontname.go and add this code, replacing myfontname with your font name:

Web

  1. 1. Find or make a CSS file that includes your font.

If your font is available on Google Fonts, you can click on Get font from the font’s page, and then click on Get embed code. In the Web section under Embed code in the <head> of your html, you can find the download URL for the font as the href attribute of the last <link> element. Copy that URL. It should look something like this: https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap

Otherwise, if your font is not on Google Fonts, you can make a CSS file with font-face to load the font. Host that CSS file on your website or somewhere else and then copy its URL (it can be relative or absolute).

    1. If you don’t already have one, make a core.toml file in your app directory.

    2. Add this somewhere in your core.toml file:

Web metrics

To get more accurate text layout on web for your custom font, you can embed the font metrics. This is not always necessary, and you only need to do this if your text is getting positioned strangely.

Note: If your font has a small file size or load time is not an issue, you can instead just include the normal embedded fonts for desktop and mobile on web as well (by removing the //go:build !js build tag), but it is more optimal to do the web metrics approach.

  1. 1. Install the metricsonly tool:
  1. 1. Run metricsonly on your myfontname directory:

For example:

  1. 1. Make a new file in your app directory called myfontname_js.go and add this code, replacing myfontname with your font name:

Previous

Next