/
Establish fonts

Establish fonts

Norsk

We can custom the fonts in our services by establishing the fonts in CSS and include it in the design.

The font file defines the graphic representation of text that can contain information like point size, weight, width and design.

The font files comes in different formats.

  1. TruetType (.tff)

  2. OpenType (.otf)

  3. Web Open Font Format (.woff)

For our use, the differences has little significance. It can vary on how fast it loads on a website. Web Open Font Format (.woff), is for example more compressed compared to TruetType (.tff) and OpenType (.otf) and make the content download more quickly.

How to add custom fonts to forms:

Technically spealing, you can add just about any font to any website.

However, when searcing for font online, you always want to keep in minde the price, the licence agreement and the installation method. (Where you download the font vary. There are some free on the web and some you need licence to use. ) Some examples of font libaries are: Google Fonts (Free), Adobe Fonts (Premium), Custom Fonts and etc.

Compose do not provide a libary for fonts. The costumer has on their own get the licence and have the font files available.

1. Download the font

When the font files are downloaded in either of the three font formats mentioned, we can include it in the design folder. We create a folder named “fonts“ and place the downloaded font files here.

2. CSS-code

In the CSS code we need to specifiy the URL location and the font name.

Example:

@font-face { font-family: "IBMPlexSans-Bold"; src: url("fonts/IBMPlexSans-Bold.ttf"); }

@font-face { font-family: "IBMPlexSans-BoldItalic"; src: url("fonts/IBMPlexSans-BoldItalic.ttf"); }

To use this font in the CSS code, we refer to it by using the font name in the declaration like this:

h1 {
font-family: "IBMPlexSans-Bold","Helvetica","Arial","sans-serif";
font-weight:normal;
font-style:normal;
}

As you can see the font-family can hold several names as a “fallback“ system. If the browser does not support the first font, it tries the next front. Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other font are available.

So for example we might instruct your browser to use “Helvetica, Arial, sans-serif”, meaning to use Helvetica if it’s available (Mac OS includes it), Arial if Helvetica isn’t available (a similar font available on Windows), or the system’s default sans-serif font if it can’t find either of those.

Other properties:

font-strech: Sets how the font should be streched. Default value is “normal“.

font-style: Sets how the font should be styled (normal, italic, oblique). Default value is “normal“.

font-weight: Sets the boldness of the font. Default value is “normal“.

font-size: This property sets the size of the text. You should not use this font-size property adjustment to make paragraphs look like heading or heading look like paragraphs. Always use proper HTML tags/property like <h1>-<h6> for heading and <p> for paragraphs. You can set the font size with pixels or with Em. The default text size in browsers is 16 px. Meanwhile 1em is equal to th current font size. 1em = 16 px. (pixels/16=em)