How to Add Custom Fonts to Q-Cal: A Step-by-Step Guide

Add Custom Font

1. Go to https://www.fontsquirrel.com/tools/webfont-generator

2. Upload your font
3. Follow these settings:

Font upload interface with options for font formats, rendering, vertical metrics, glyph fixing, x-height matching, protection, subsetting, OpenType features, and CSS encoding, including advanced options for font name suffix and glyph spacing.
​

4. Download package

5. Open your fonts.css file

6. Copy the content and paste it into the CSS file in Q-Cal at the top.
7. Remember to add “font-family: name of your font;” to the body tag.

    • Related Articles

    • How to design a activity overview

      Q-Cal is a smart screen solution with many options. But how do you create an activity overview? This guide will show you step by step how to make an activity overview. 1. Click on Design at the top of the site. 2. Choose Activity Overview. 3. Select ...

    • CSS Variables

      We have a couple of variables that can be used in the CSS sheet to call some already defined styles. If you use these variables, the solution will use the style that you defined on the front-end of your solution. Font var(--common-font, 'Some font ...

    • Check-In Properties

      The following properties can all be used in a Check-In solution. Usually, you'll only be needing the standard fields, but for some custom solutions, the special fields can be useful. Standard fields client.Name client.Description client.RFID ...

    • How to create/use Q-Cal Templates for Q-Play Template solution

      How to create a Q-Cal Screen Design. If you want to add a dynamic element to your Q-Play template, we can create a relevant template in Q-Cal. Then we also showcase how the two systems work together. Sign in to Q-Cal. Click on Design Choose a display ...

    • Create Azure app for AD-Integration

      Introduction This guide provides a step-by-step walkthrough for setting up an Azure App for Active Directory (AD) integration between Office 365 and NordicScreen Q-Cal. The guide is divided into two steps: 1. Setting up the Azure App in the Azure ...