Adding Custom Fonts to a Web Page
Fonts significantly shape the look and feel of a website. High-quality typography improves readability and makes a design more memorable. Many fonts are free to use, while others require licensing, always respect copyright rules.
Google Fonts Service
There are many exciting fonts available for free use. Let's explore the options provided by https://fonts.google.com/. 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
styles.css
The font-family property doesn't work because our project isn't' yet aware of the "DM Sans" custom font. Let's add the font to the project using https://fonts.google.com/.
In the "Search fonts" input field, type the font name you need. In this case, it's "DM Sans." Once it appears, click on the card for "DM Sans."
On the font's page, click the "Get font" button.
Next, click the "Get embed code" button.
Finally, copy the link and paste it into the HTML file of your project within the <head> element. It's important to insert the link before the link to your custom styles. This ensures that the browser will first load the custom fonts before applying any styles that use them. Once you've added the link, "DM Sans" will be available as a custom font for your project. Now, let's run the project to verify everything works correctly.
index.html
styles.css
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.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Incrível!
Completion taxa melhorada para 2.56Adding Custom Fonts to a Web Page
Deslize para mostrar o menu
Fonts significantly shape the look and feel of a website. High-quality typography improves readability and makes a design more memorable. Many fonts are free to use, while others require licensing, always respect copyright rules.
Google Fonts Service
There are many exciting fonts available for free use. Let's explore the options provided by https://fonts.google.com/. 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
styles.css
The font-family property doesn't work because our project isn't' yet aware of the "DM Sans" custom font. Let's add the font to the project using https://fonts.google.com/.
In the "Search fonts" input field, type the font name you need. In this case, it's "DM Sans." Once it appears, click on the card for "DM Sans."
On the font's page, click the "Get font" button.
Next, click the "Get embed code" button.
Finally, copy the link and paste it into the HTML file of your project within the <head> element. It's important to insert the link before the link to your custom styles. This ensures that the browser will first load the custom fonts before applying any styles that use them. Once you've added the link, "DM Sans" will be available as a custom font for your project. Now, let's run the project to verify everything works correctly.
index.html
styles.css
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.
Obrigado pelo seu feedback!
