Working With Fonts

Adding fonts to your project can give it a unique personality and improve the user experience. Whether you're starting a new project or working on an existing one, you can easily add fonts using some simple CSS rules.

How to Add Fonts 

To add a font to your project, you can use the CSS @import or @font-face at-rules. When you use these, the font is loaded into the app and are applied immediately on the stage.
Let’s begin by creating a new board to style.
Now we’ll find the project’s global stylesheet. If you used a template to start this project, it is already preconfigured to use a global stylesheet for all boards (meaning that any styles put into this file are accessible by any board). The easiest way to locate the stylesheet is to go into Files panel and locate the 'index' entry in boards-global-setup.ts.
In this example, we can see that the global stylesheet is located in /src/styles/.

Adding fonts using @font-face 

Per MDN Web Docs, the @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
Note:
In the following example, we’re using the URL of a font from Google Fonts, but typically this file would be locally-hosted, with a URL in the format: /path/to/your/local/font/Roboto-Regular.ttf
In the file located above (~/src/styles/index.scss), paste the following code at the top:
1
2
3
4
5
6
7
8
9
/* index.scss */
@font-face {
    font-family: "Roboto";
    src: url("https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxP.ttf");
}

* {
    font-family: "Roboto", sans-serif;
}
With this rule, the Roboto font is declared by naming it Roboto and specifying the source URL for the font file. The universal selector * then applies font-family: "Roboto", sans-serif to all HTML elements, with sans-serif as a fallback if Roboto fails to load.
Before adding this rule, the Styles panel showed that the element was inheriting its styles from :root. After adding the rule, the div element wrapping the text has a global selector targeting all elements ('*'), and the font is set to Roboto.
Switch to the * selector to edit this universal selector further.

Adding fonts using @import 

The @import rule allows you to import entire stylesheets into your project (or parts of them via media queries/layers). This can be particularly useful when you have the URL of an online stylesheet that you want to use. While these stylesheets can include a variety of CSS rules, one common use case is to import specific fonts that are declared within these stylesheets. But what if you want a font from another library like Google Fonts?
  1. Visit Google Fonts at fonts.google.com.
  2. Select a font you like and click the Get font button to add the font to your selection. Then, click Get Embed code.
Now copy the middle line of embeddable code and paste it in the index.scss file in Codux.
1
2
3
4
5
/* index.scss */  
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');  
* {
    font-family: "Roboto", sans-serif;
}
Tip!
Check out the article on style variables, and see our eCommerce and website starter projects for examples of working with style variables in Codux.
IN THIS ARTICLE
Previous article
Next article