Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Adding Custom Fonts to the Web Page | Text Styles
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS
2. Text Styles
Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts
3. Box Model and Element Spacing
Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout
4. Flexbox
What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox
5. Decorative Effects
Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

bookAdding 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).

html

index

css

index

js

index

copy

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.

html

index

css

index

js

index

copy

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?

Why do we need to use different fonts on a web page?

Select a few correct answers

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 4
We're sorry to hear that something went wrong. What happened?
some-alt