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

Contenu du cours

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
What is CSS and Why is it Important?Linking CSS to an HTML DocumentMastering CSS Selectors for Styling HTML ElementsChallenge: Apply Your First CSS StylesChallenge: Style with Class SelectorsEnhancing Styles with User Action Pseudo-ClassesChallenge: Apply User Action Pseudo-ClassesChanging Text Colors in CSSOptimizing Workflow for Efficient CSS CodingChallenge: Use Variables for Better CSS Management
2. Styling Text in CSS
Mastering Text Styling in CSSText Formatting Techniques for ReadabilityChallenge: Format Text with CSSAdding Custom Fonts to a Web PageUnderstanding and Using Font PropertiesChallenge: Explore Font Properties
3. The CSS Box Model & Spacing Elements
What is the CSS Box Model?Understanding Box Sizing in CSSAdding Space with Margins and PaddingChallenge: Apply Box Sizing to ElementsUsing Structural and Functional Pseudo-ClassesChallenge: Practice Structural Pseudo-ClassesUnderstanding Block, Inline, and Inline-Block ElementsWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict Page Layout with Different Element Types
4. Mastering Flexbox for Layouts
What is Flexbox and Why Use It?Setting the Flex Direction for LayoutsJustifying Content Horizontally in FlexboxAligning Items Vertically in FlexboxUnderstanding Flex Item PropertiesChallenge: Apply Flexbox ConceptsChallenge: Build a Layout with Flexbox
5. Adding Decorative Effects with CSS
Using Background Colors for DesignApplying Background Images to ElementsWorking with Images in CSSCreating Effects with Decorative Pseudo-ElementsAdding Shadows for Depth and StyleChallenge: Implement Decorative Effects in CSSFurther Steps

book
Adding Custom Fonts to a 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.html

css

styles.css

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

css

styles.css

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.

question mark

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

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4
Nous sommes désolés de vous informer que quelque chose s'est mal passé. Qu'est-il arrivé ?
some-alt