Додавання Користувацьких Шрифтів до Веб-сторінки

Шрифти відіграють вирішальну роль у підвищенні візуальної привабливості веб-сторінки. Дизайнери створюють численні красиві шрифти, що запам'ятовуються і справляють незабутнє враження на користувачів. Веб-сайтам з погано розробленими шрифтами може бути складно привернути увагу. На щастя, існують ресурси з вільним доступом, що дозволяють будь-кому використовувати готові шрифти. Однак важливо зазначити, що існують також ліцензійні шрифти, які потрібно купувати, і дуже важливо поважати закони про авторське право, щоб уникнути будь-яких порушень.

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

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 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

index.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.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 4