Adding Custom Fonts to the Web Page
Fonts play a crucial role in enhancing the visual appeal of a web page. Designers craft numerous memorable and beautiful fonts to leave a lasting impression on users. Websites with poorly designed fonts may struggle to capture attention. Fortunately, there are resources offering free access, allowing anyone to use pre-created fonts. However, it's essential to note that there are also licensed fonts that require purchase, and it's crucial to respect copyright laws to avoid any violations.
Google Fonts Service
There are many exciting fonts available for free use. Let's explore the options provided by Google. It's straightforward to add a Google font to the markup.
Firstly, let's run the next example, which uses the default font. The p element has the following properties: font-family (font name), font-size (font size), and font-weight (font boldness).
index.html
index.css
index.js
The font-family property does not work because our project is not aware of the "DM Sans" custom font. It's time to add the font to the project, and we'll do this using fonts.google.com.
In the Search Font input we type the necessary font. In this example we need "DM Sans". Then, click on the card of the "DM Sans" font.
On the opening page, let's scroll down a bit, and we will see a list of all available font variations with different styles (italic or regular) and various boldness options (400, 500, or 700).
For this example, we need the font Regular 400. We can select it by clicking the Select Regular 400 + button, and a popup will appear with the link that we can copy and use in the project.
We copy the link and paste it into the project's html file within the head element. A crucial point is that we have to paste the link before the link to our custom styles. This way, the browser, while reading the HTML document, will first identify that we use custom fonts and then understand where we use them. By including the link, we obtain the custom font "DM Sans". Let's run the project to ensure that it works correctly.
index.html
index.css
index.js
We can observe the difference between the custom font and the default font. Additionally, each browser has its default fonts. Therefore, knowing how to use custom fonts on a website is essential.
Why do we need to use different fonts on a web page?
Selecciona unas respuestas correctas
¿Todo estuvo claro?
Contenido del Curso
CSS Fundamentals
CSS Fundamentals
Adding Custom Fonts to the Web Page
Fonts play a crucial role in enhancing the visual appeal of a web page. Designers craft numerous memorable and beautiful fonts to leave a lasting impression on users. Websites with poorly designed fonts may struggle to capture attention. Fortunately, there are resources offering free access, allowing anyone to use pre-created fonts. However, it's essential to note that there are also licensed fonts that require purchase, and it's crucial to respect copyright laws to avoid any violations.
Google Fonts Service
There are many exciting fonts available for free use. Let's explore the options provided by Google. It's straightforward to add a Google font to the markup.
Firstly, let's run the next example, which uses the default font. The p element has the following properties: font-family (font name), font-size (font size), and font-weight (font boldness).
index.html
index.css
index.js
The font-family property does not work because our project is not aware of the "DM Sans" custom font. It's time to add the font to the project, and we'll do this using fonts.google.com.
In the Search Font input we type the necessary font. In this example we need "DM Sans". Then, click on the card of the "DM Sans" font.
On the opening page, let's scroll down a bit, and we will see a list of all available font variations with different styles (italic or regular) and various boldness options (400, 500, or 700).
For this example, we need the font Regular 400. We can select it by clicking the Select Regular 400 + button, and a popup will appear with the link that we can copy and use in the project.
We copy the link and paste it into the project's html file within the head element. A crucial point is that we have to paste the link before the link to our custom styles. This way, the browser, while reading the HTML document, will first identify that we use custom fonts and then understand where we use them. By including the link, we obtain the custom font "DM Sans". Let's run the project to ensure that it works correctly.
index.html
index.css
index.js
We can observe the difference between the custom font and the default font. Additionally, each browser has its default fonts. Therefore, knowing how to use custom fonts on a website is essential.
Why do we need to use different fonts on a web page?
Selecciona unas respuestas correctas
¿Todo estuvo claro?
