Web Fonts

The Magic of Custom Typography

Web fonts are like ancient, magical runes that give your website a unique voice. Why settle for dull, standardized fonts when, with a flick of your CSS wand, you can step into entirely new typographic realms? Web fonts allow you to infuse your content with personality and charm, as if every word were wearing its own elegant cloak.

With the right choice and a touch of technical wizardry, your site becomes not only a visual delight but also wonderfully readable and user-friendly. Imagine every headline as a bold proclamation and every paragraph a whispered spell! Suddenly, your website transforms into a masterpiece that doesn’t just communicate — it captivates. Don’t let your words be ordinary — let them shine like the stars in a typographic night sky!

Let’s Keep Going

Web Fonts
Embedding Fonts

The Variety of Fonts
Font Optimization

Fonts Without Borders

Use Unique Fonts Directly from the Web and Give Your Site Character.

Magical Fonts

The Art of typographic Wizadry

If you want to add a touch of glamour to your page, web fonts are the key to unlocking your typographic power. These special fonts, going far beyond the usual web-safe options, can be locally stored and woven into your design with just a few magical tweaks. Convert your fonts into the .woff and .woff2 formats—the favorites of modern devices—to make loading times fly by like a well-cast spell. You can convert your fonts here: transfonter.org

Grab Open Sans from google fonts and bring it to life with a spell!
Using the @font-face rule, summon the font into your project. Safely store it in the fonts folder and define its characteristics—from “normal” to “bold,” from “plain” to “italic.” Soon, your text will glide across the page like a shimmering dragon cutting through the skies.

font-family: The font’s name for CSS usage, in this case, Open Sans.
src: Points to your locally saved font files in formats like .woff and .woff2.
font-weight: Defines the font’s weight, e.g., normal (400) or bold (700).
font-style: Sets the font’s style, such as normal or italic.

You can discover a treasure trove of font libraries at sites like:
Google Fonts
Dafont

Embedding Fonts

Casting your spell with CSS

To weave fonts into your CSS seamlessly, use the @font-face rule. Pay close attention to the paths—like a wizard mixing the perfect potion, you must ensure everything is in its rightful place. Once Open Sans is loaded, you can proudly set it as the font for your body element. And should the spell falter, trusty Arial or sans-serif will step in as loyal fallbacks to save the day. The magic lies in precision—every path, every declaration, must be flawless!

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
         url('fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'OpenSans', Arial, sans-serif;
}

The Variety of Fonts

Styles and Weights in Detail

For every variation of your font—be it bold, italic, or both—you’ll need a unique spell, or rather, its own @font-face rule. This ensures that your font is perfectly presented in every scenario, without sacrificing style or expression. It’s like building an arsenal of enchantments, ready to deploy whenever the need arises. Each weight and style is its own masterpiece. Treat them with care, and your typography will always dazzle!

Font Optimization

The Art of Swift Load Times

Less is more, even when it comes to fonts. If you want your page to load as fast as the wind, select only the styles and weights you truly need. Modern formats like .woff2 offer high compression, ensuring your site loads as swiftly and gracefully as a wizard on a broomstick. A lighter font arsenal means a faster, smoother experience for your visitors. Choose wisely, and let your design soar!

In this lesson, you have learned…

How to use @font-face to embed custom fonts into your CSS and give your design a unique typography.
Why you should save fonts in .woff and .woff2 formats to optimize loading times and support modern devices.
How to use font libraries like Google Fonts or Dafont to bring a wide selection of web fonts directly into your project.
Why you need multiple @font-face rules for different font weights and styles to ensure a consistent and flexible design.
How fallback fonts (sans-serif, Arial, etc.) ensure that your site remains readable even if the desired font fails to load.
Why it’s important to only load the font styles and weights you really need to improve your website’s performance.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Script of the Ancients

In a dusty library, nestled between creaking floorboards and surprisingly animated cobwebs, the writings of the Ancients lie dormant, waiting to be awakened. Only those who unravel the secrets of web fonts and the mystical @font-face rule can set these magical typefaces dancing across the pages. Prepare to breathe life into the hidden letters in all their splendor – let the text whisper, shout, or sing, just as the Ancients once intended!

Your Task: Embed Web Fonts

Download and Convert a Font:
- Choose a font from Google Fonts and download it.
- Convert the font using transfonter.org to generate .woff and .woff2 formats.
Embed the Font:
- Use the @font-face rule to link the font from the fonts folder and assign it a name for use in your CSS.
Apply the Font to Elements:
- Apply the new font to the body element, ensuring all text elements inherit it seamlessly.
- Adjust the font-family property accordingly.
Customize Styles:
- Modify the font size and style for <h1> and <p> elements to make the typography stand out.
- Ensure readability and elegance by fine-tuning properties like font-size, line-height, and font-weight.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

@font-face {
    font-family: 'ImperialScript';
    src: url('assets/fonts/ImperialScript-Regular.woff2') format('woff2'),
        url('assets/fonts/ImperialScript-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'ImperialScript';
}

Let’s Keep Going