html - Cannot get custom fonts to work, even when copy pasting tutorial code

Question

Welcome To Ask or Share your Answers For Others

html - Cannot get custom fonts to work, even when copy pasting tutorial code

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Cannot get custom fonts to work, even when copy pasting tutorial code

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

This bit of code is available on https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face. It is supposed make the sentence "This is Bitstream Serif Bold" appear in the VeraSeBD font. However it simply does not.

I can change fonts to arial for example. Using this code, the font is different:

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }

    body { font-family: arial }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

How does one proceed when even copy pasting sample code still does not make it work?

The setup for the test is using a PHP server running on localhost on a windows machine

question from:https://stackoverflow.com/questions/65908647/cannot-get-custom-fonts-to-work-even-when-copy-pasting-tutorial-code

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:12:31+0000

If this does not work then it is probably CORS you're dealing with. Please do not use the java2s website as a reference for html and css because this site is very very old and not up-to-date.

First, the browser will try to load the modern woff2 font. If it fails then it will try to load the older woff font. The ttf font is a fallback for very old browsers/devices. At the end, if no fonts can be loaded , it falss back to the default serif font.

edit all fonts fail to load. Reason: they has been blocked by CORS policy.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Font Sample</title>
<style>
@font-face {
    font-family: 'Bitstream Vera Serif Bold';
    font-style: normal;
    font-weight: 400;
    src: local('Bitstream Vera Serif Bold'),
         url('https://mdn.mozillademos.org/files/2468/VeraSeBd.woff2') format('woff2'),
         url('https://mdn.mozillademos.org/files/2468/VeraSeBd.woff')  format('woff'),
         url('https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf')   format('truetype');
}
body {
    margin: 0;
    font-family: "Bitstream Vera Serif Bold", serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>

Categories

html - Cannot get custom fonts to work, even when copy pasting tutorial code

html - Cannot get custom fonts to work, even when copy pasting tutorial code

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags