文字の見た目が同じにならない

Question

https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1589109183_YjliNGUxM2RjMTc4
上記サイトの模写をしています。Airbnbの文字の見た目が同じにできません。元サイトと同じfont-family.font-weightを設定してみたりもしましたが自分の方は少し太くなってしまいます。

    <div class="top">
      <div class="d-flex pt-4">
        <svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false" style="height: 34px; width: 34px; fill: rgb(255, 255, 255);"><path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path></svg>
        <div style="margin: 18px 0px 0px 4px;">
          <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" style="height: 8px; width: 8px; display: block; fill: rgb(255, 255, 255);"><path d="m16.29 4.3a1 1 0 1 1 1.41 1.42l-8 8a1 1 0 0 1 -1.41 0l-8-8a1 1 0 1 1 1.41-1.42l7.29 7.29z" fill-rule="evenodd"></path></svg>
        </div>
      </div>
      <h1 style="margin: 83.5px 40px 0 0;">Airbnbホストになって、暮らしをレベルアップ</h1>
    </div>

<svg></svg>の部分はロゴに当たる部分です

.top {
  background-image: url(img1/[www.airbnb.jp][4]9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg); background-size: cover;
  height: 239.5px;
  color: white;
  padding: 0 0px 0 24px;
  letter-spacing: -0.75px;
  box-shadow: inset 0px -180px 80px -80px rgba(0, 0, 0, 0.501);
}

.top h1 {
 font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
  font-weight: 800;
  font-size: 33.7px;
  line-height: 36px;
}

font-familyとfont-weightは元サイトと同じものにしてあります

何が原因かわかる方がいましたら教えていただけるとありがたいです。

Comments

[zen22vv]

font-weightをnormalやboldにしましたか？

[miyabi_pudding]

細かいですが、コピーと言うと、一見悪さをしようとしているように見えてしまうので、
模写
と言う言葉に置き換えることをお勧めします。

[musashi0821]

ご解答ありがとうございます。font-weightは表示されている限りのすべてを試し、normalにしてからfont-sizeを細かく変えてみるといったこともしてみましたが本サイトの様にはなりませんでした。

ご指摘ありがとうございます。動画など解説している方達も模写といっていました。以後気をつけたいと思います

Answer 1

font-familyにCircularというフォントを指定していますが、こちらはサイトのほうで独自に追加したフォントだと思います。
devtoolを開いてNetworkタブでFontで絞り込むとフォントファイルが追加されているのがわかります。

Comments

[musashi0821]

ご解答ありがとうございます。Networkタブでfontで絞り込んでみたところ左からName Status Type Initiator Size Time Waterfall といった項目に区切られているページに来ました。Nameの部分をダブルクリックするとファイル形式の物がダウンロードされそれを開こうとしたところこれを開くアプリがなくApp Storeで探しても無いという表示が出ました。ご指摘いただいたフォントファイルというものはこちらの事でしたでしょうか？何かご存知でしたら良ければ教えていただきたいです。

[kmtr]

devtoolの画像を追加しました。こちらがCircularをふくんだフォントファイルだと思います。

[kmtr]

模写での利用で特に公開などされないのであれば、@font-faceでこちらのファイルを指定すれば自身の環境で確認出来ると思います。

https://developer.mozilla.org/ja/docs/Web/CSS/@font-face

[musashi0821]

申し訳ないんですが@font-faceでファイルを指定するというやり方について教えていただけないでしょうか？１から新しく簡単にhtmlコードを書きそこでのcssに元サイトのfont-faceをコピーしbodyにCircularを指定するとうまくいきました。何故かわかりませんがCircularのfont-familyを消しても適用されています。しかし同じ方法で進行中の模写のcssにコピーしfont-familyを指定しても何も変化ありません。調べてもみたのですがそれらしき方法が発見できませんでした。何か分かることがあれば教えていただきたいです

[kmtr]

その成功したファイルも載せていただけないでしょうか？
> 何故かわかりませんがCircularのfont-familyを消しても適用されています。
おそらくキャッシュだと思います。

[musashi0821]

ご返信遅くなりすいません、そのファイルですが適用されていませんでした。sans-serifのフォントと見間違えていました。CSSに@font-faceをそのまま貼り付ける工程自体が間違っているのでしょうか？何か分かりましたらご返信いただきたいです

[kmtr]

https://a0.muscache.com/airbnb/static/packages/dls/dls-lite_cereal-d9f6fdb2a0dd4a18c37f8ee01de8ec3d.css

このファイルを見るとfont-faceをunicode-rangeを指定しながら設定しています。同様に設定すればおそらく同じスタイルになるのではないでしょうか？

[musashi0821]

ご解答ありがとうございます。
その方法はCSSに直接font-faceの内容をコピーして貼り付けるのとは違うものなのでしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/unicode-rangeなども見てみたのですがhtml側に特にunicodeに関する記述などもみられず私の今の状態との違いが見当たりませんでした。今の私の状態は元サイトのfont-faceをCSSに貼り付けbodyにcircularを指定している状態です。何度もすいませんが何か分かりましたらよろしくお願いします