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 application and immediately appears on the stage.

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. Here's a simple example that assumes you're working on a new project created using our blank template in Codux.
First create a board that you want to style. For example:
Since we used a Codux template for our new project, it's already configured to use a single global stylesheet for all the boards in our project, meaning that any styles we put in this file are accessible by any board. Locate this stylesheet – index.css, in the Files panel.
Paste the following code at the top of the index.css file:
1
2
3
4
@font-face {
    font-family: "Roboto";
    src: url("https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxP.ttf");
}  
1
2
* {
    font-family: "Roboto", sans-serif;
In this example, we're using the @font-face rule to load a font file. Then, we're setting the font-family of all elements (*) to Roboto.
Now, in the Styles panel, you can see that the div element wrapping the text has a global selector targeting all elements ('*'), and the font is set to Roboto, falling back to sans-serif if Roboto isn't found or loaded.
Note:
We included 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

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 like this:
1
/* index.css */
1
@import url('https://static.parastorage.com/unpkg/@wix/wix-fonts@1.11.0/madefor.css'); 
1
2
3
* {
    font-family: "madefor", sans-serif;
}

In the example above, we're importing a font, 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.
  3. Copy the middle line and paste it in the index.css file in Codux.
Make sure to replace the font-family name in the CSS. For example:
1
/* index.css */
1
@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');
1
2
3
* {
    font-family: "Roboto", sans-serif;
}

A Note on Global Font Setup 

Our starter templates for Codux come preconfigured with a global stylesheet (index.css in this case). If you look in the project's codux.config.json file, you'll see this line:
1
"boardGlobalSetup": "./src/_codux/boards-global-setup.ts",
In the project's ./src/_codux/boards-global-setup.ts file, you'll see this line:
1
import '../index.css';
What this means is that any styling you put in this CSS file will be available to all boards in your project. If you want to add styling for a particular board only, you can create a new stylesheet for that board visually through the Styles panel.
Refer here for information on adding this configuration to load your fonts globally in your project.
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