Categories
HTML Web development

How to add custom fonts to HTML?

How to add custom fonts to HTML?

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:

  1. Find the custom font that you like to add and download it (preferably files .ttf, .woff, or .woff2)
  2. 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)
  3. 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

Categories
CSS Web development

CSS @font-face Rule

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.

Syntax:

@font-face {
  font-properties
}

font-family – (required) specifies the name of the font.

src – (required) specifies the URL(s) where the font is downloaded from.

font-stretch (normal/ condensed/ ultra-condensed/ extra-condensed/ semi-condensed/ expanded/ semi-expanded/extra-expanded/ ultra-expanded) – (optional) specifies how the font should be stretched (the default value is “normal”).

font-style (normal/ italic/ oblique) – (optional) specifies how the font should be styled (the default value is “normal”).

font-weight (normal/ bold/ 100/ 200/ 300/ 400/ 500/ 600/ 700/ 800/ 900)- (optional) specifies the boldness of the font. (the default value is “normal”).

unicode-range – (optional) specifies the range of unicode characters the font supports (the default value is “U+0-10FFFF”).

Example1:

Using the CSS @font-face rule you need first specify a name for the font (e.g. Pacifico), and then point to the font file (src):

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

p {
  font-family: Pacifico;
}
</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.


Example2:

<!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:30px;
}
</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.


Browser Support for Font Formats:

Font FormatChromeFirefoxEdgeSafariOpera
TTF/OTF4.03.59.0*3.110.0
WOFF5.03.69.05.111.1
WOFF236.039.014.010.026.0
SVGNot supportedNot supportedNot supported3.2Not supported
EOTNot supportedNot supported6.0Not supportedNot supported

Enjoy coding!

Read also:

CSS @import Rule

HTML Text Formatting And Styles

CSS Styling Links