ウェブフォントが表示されない

前提・実現したいこと

https://befonts.com/objective-font-family.html
のフォントの
イタリック・ふと文字を使いたいです。

ウェブフォントジェネレーターを使って、インストールして、htmlの階層と同じところに格納するところまではきました。

Webfontsのインストール

Webフォントはすべての主要なブラウザプラットフォームでサポートされていますが、すべてが同じ方法でサポートされているわけではありません。現在、すべてのブラウザを対象とするために含める必要がある4つの異なるフォント形式があります。これには、TTF、WOFF、EOT、SVGが含まれます。

1.ウェブフォントをアップロードする

ウェブフォントキットをウェブサイトにアップロードする必要があります。これらは、CSSファイルと同じディレクトリまたはその近くにある必要があります。

webfontスタイルシートを含める

特別なCSS @ font-face宣言は、さまざまなブラウザーが頭痛の種を引き起こすことなく、必要な適切なフォントを選択するのに役立ちます。この構文の詳細については、Fontspringのブログ投稿を読んでください。そのためのコードは次のとおりです。

@font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); }

私たちはすでに先に進んで、あなたのためにコードを生成しました。次のように、HTMLのスタイルシートにリンクするだけです。

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 3.独自のスタイルシートを変更する

新しいフォントを利用するには、スタイルシートを使用するように指示する必要があります。上記の元の@ font-face宣言を見て、「font-family」というプロパティを見つけます。リンクされている名前は、フォントを参照するために使用する名前になります。変更するセレクター内の「font-family」プロパティのフォントスタックに、そのWebフォント名を付加します。例えば：

p { font-family: 'WebFont', Arial, sans-serif; }

4.テスト

これをもとに、このようにコーディングしましたが、うまくいきません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/style.css">
7    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
8    <title>Document</title>
9</head>
10
11<body>
12    <header>
13        <div class="overlay"></div>
14        <div id="yt_player">
15            <iframe width="560" height="315" src="https://www.youtube.com/embed/Nt6ZwuVzOS4?controls=0?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
16        </div>
17
18        <p>LOGO</p>
19
20        <div class="content">  ←ここ
21            <h1>portfolio</h1>
22        </div>
23    </header>

CSS
1.content h1 {
2  font-family: 'objectivebold_italic';
3  font-size: 180px;
4}

うまくいきませんーーー…
どうしてなのか…

何か記述が抜けていたりしますか？

よろしくお願いいたします・・・

修正1

行動規範の内容に同意します

回答2件

何か記述が抜けていたりしますか？

はい、@font-face宣言を全く行っていないようです。

投稿2020/08/18 08:58

maisumakun

総合スコア145184

maisumakun

2020/08/18 08:59

ブラウザのコンソールになにかエラーメッセージなどは出ていませんか？

nomura02

2020/08/18 09:20

Unchecked runtime.lastError: The message port closed before a response was received. という同じエラーが30個くらいと、 Failed to load resource: net::ERR_FILE_NOT_FOUND という同じエラーが5個くらいあって、しかし何をみたら良いのかわからず、かなしいです…

行動規範の内容に同意します