In CSS, there are many important aspects and elements that every developer must know. An important one, which could even be considered one of its pillars, is the typography or fonts. This is because a large percentage of the information that is displayed on the users' screen corresponds to textual content.
The handling of fonts in CSS is very important to give a great user experience. Disorganized fonts, wrong sizes, inadequate formats, and/or colors not matching a theme, can be uncomfortable to read, leading users to leave the website or close the application. This article will explain how fonts can be added in CSS and their properties.
Font details
Working with fonts in CSS, a large number of properties have to be carefully considered. It's important to know the most important properties of the fonts. The main types of sources to consider are:
Serif
The fonts with serif or grace, are all those that have on their edges, a kind of auctions or small ornaments. They can be quickly identified, as their name usually ends with "Serif". It is common to see this type of font in printed media because its edges offer greater legibility.
Paloseco
It could be said that paloseco fonts are the complete opposite of sefira fonts. Since, the edges of this are completely smooth, without presenting any type of decorations or finishes. It is the most viewed type of font on the internet, thanks to the fact that it offers a cleaner appearance to the content that is displayed, preventing the user's eyes from getting tired. This class of fonts usually has a name that ends in “Sans Serif”.
Monospaced
Fonts which letters are the same width are called monospaced. Monospaced fonts are often used for programming or in terminal emulators, where it is much more comfortable to read monospaced lines.
Basic CSS properties related to fonts
One of the main advantages of working with fonts in CSS is the high level of customization. Because this HTML complement has a very wide range of options to modify the basic characteristics of the sources that are used. Among the most basic properties that can be applied to any CSS style sheet can be counted:
· font-family: It is the property with which the name of the font can be specified, or if there is one, a list of them.
· font-size: It is used to specify the size of the font.
· font-style: with this property the style that the font will have is indicated.
· font-weight: the property that indicates the weight or thickness that the font will have, generally between 100 and 800.
How to declare fonts in CSS?
The way fonts are added in CSS can vary considerably depending on where these fonts come from:
System Fonts
All computers have an operating system where all the activities it performs are processed. They include many fonts installed by default. Many web and native applications with CSS often make use of these fonts to present their content to users. To include them in a CSS, the first thing to do is create a selector to access the component where the font will be used, usually, they are declared in the body, and open a brace, then the “font-family” property will be used. ” to indicate the name of the system font(s) to be included, end by closing the curly brace, if there are no further instructions to add. It is always recommended to declare more than one type of source, so that, if the system from which the content is displayed does not have the source that was declared first, the content will be displayed in the next declared source. Here is a small example:
body {
font-family: Arial, Helvetica, sans-serif;
}
Another thing that can be done is to create a class that can be added to several components of the same web page and add the font there. This way, the components with the defined class will display with the selected font. Here is an example:
.lucida {
font-family:'Lucida Sans', Verdana, sans-serif;
}
In HTML the following would be done
<p class=“lucid”>This is a paragraph… </p>
<h1 class=“lucida”>This is a title… </h1>
External sources
Another option if you are looking for something fresher and more innovative, is the use of external sources. As long as you keep in mind that with its use there is a risk that there are many users who won’t see it. When using external fonts, many devices do not have these fonts installed in their operating systems, therefore the main fonts chosen by the developer would not be visible.
This can be corrected by downloading the fonts from the web using the @font-face directive, which should be placed at the beginning of the .css file you are working with. This is a way of notifying the browser of the presence of fonts that may not be installed on the device.
When it comes to including external fonts in CSS you have two options:
Search for the fonts and download them, to later use the local font-face
· Use a CDN to install them.
Using the local font-face
When downloading the font to use the local Font-face, the first thing to do is add the font name and route to the first few lines of the .css file, like so:
@font-face {
font-family: 'Robot';
src: url('../fonts/Roboto/Roboto-Regular.ttf');
}
Later, it only remains to declare a class like this:
.robot {
font-family: 'Roboto', sans-serif;
}
Install fonts with a CDN
Using a CDN to install CSS fonts can be one of the easiest options, and it also allows you to use external resources with virtually no limits. For this technique, you have two options.
· Use a link in the HTML to include the sources.
· Include fonts with @import.
Include source with <link>
In this case, you only have to include the "link" of the selected sources in the header or "head" of the HTML, this way:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto: wght@300 ;400&display=swap" rel="stylesheet">
For example, the Roboto Font is used, which is found for free in Google Fonts.
Using @import
Just open the .css file and add @import at the beginning, followed by the URL, like this:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto: wght@300 ;400&display=swap');
As in the previous case, the Roboto font found in Google Font was taken as an example.
Bibliographic references
· idiomacss.com. Retrieved on 06/17/2022 from https://lenguajecss.com/css/fonts-and-typefaces/typefaces/
developer.mozilla.org. Retrieved on 06/17/2022 from https://developer.mozilla.org/en/docs/Learn/CSS/Styling_text/Fundamentals
· kodetop.com. Retrieved on 06/18/2022 from https://www.kodetop.com/include-fonts-in-css-with-font-face/
· jose-aguilar.com. Retrieved on 06/18/2022 from https://www.jose-aguilar.com/blog/como-agregar-una-fuente-a-tu-pagina-web-con-css/
