@import Archives - Lena Design

You can add custom fonts to HTML using the CSS @import rule (google fonts) or by the CSS @font-face rule.

CSS @import Rule

The CSS @import rule allows you to import a style sheet into another style sheet.

The CSS @import rule should be placed at the top of the document (after any @charset declaration).

Example:

Import custom font to your HTML document (used font source: https://fonts.google.com/):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS @import Rule</title>
    <style>
 @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

        p {
  font-family: 'Dancing Script', cursive;
  font-size:100px;
}
    </style>
</head>

<body>
    <p>Some text...</p>
</body>
</html>

Output:

CSS @import Rule

Some text…

CSS @font-face Rule

The CSS @font-face rule allows web designers to use custom fonts.

The custom font can be loaded from a locally-installed font on the user’s computer or a remote server.

To add the custom font to the website using the @font-face rule:

Find the custom font that you like to add and download it (preferably files .ttf, .woff, or .woff2)
Upload font files on your website (you can upload the custom font by plug like Custom Fonts (for WordPress) or use Dropbox and add your fonts to the Public Folder)
Add your custom font files into CSS using the @font-face rule (look out below).

Note: different browsers supports different font formats. To see which browser supports which format click here.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: amatic;
  src: url(https://lenadesign.org/wp-content/uploads/2021/11/AmaticSC-Regular.ttf);
}

p {
  font-family: amatic;
  font-size:50px;
}
</style>
</head>
<body>

<p>With the CSS @face-font rule, you can use custom fonts on the website.</p>

</body>
</html>

Output:

With the CSS @face-font rule, you can use custom fonts on the website.

Enjoy coding!

Read also:

CSS Fonts

HTML Text Formatting And Styles

CSS Styling Links

The CSS @import rule allows you to import a style sheet into another style sheet.

The CSS @import rule should be placed at the top of the document (after any @charset declaration).

Syntax:

@import url| list-of-mediaqueries;

url – URL that represents the location of the resource to import.

list-of-mediaqueries – comma-separated list of media queries conditioning the application of the CSS rules specified in the linked URL.

Example:

Import custom font to your HTML document (used font source: https://fonts.google.com/):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS @import Rule</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

        p {
  font-family: 'Dancing Script', cursive;
  font-size:100px;
}
    </style>
</head>

<body>
    <p>Some text...</p>
</body>
</html>

Output:

Enjoy coding!