Webfonts in Webseite einbinden

Lupus_III · 16. November 2023

Hallo zusammen,

ich teste gerade wie ich einen Webfont, den ich downgeloadet habe in eine CSS-Datei einbinden kann. Ich habe die folgende Regel aufgestellt. Leider zegt mit die h2 Überschrift nicht das gewünschte Ergebnis. Hat jemand eine Idee. Kann man ttf-Dateien dafür überhaupt anwenden?

Code

/* PoetsenOne-Regulars */
@font-face {
    font-family: 'PoetsenOne-Regulars';
    font-style: normal;
    font-weight: 500;
     src: url('fonts/PoetsenOne-Regulars.ttf') 
           format('truetype');
 }
body
{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #262626;
    font-family: 'PoetsenOne-Regulars', sans-serif;
}


h2{
    font-family: 'PoetsenOne-Regulars', sans-serif;
    font-size: 60px;
    color: #ffde53 ;
}

Alles anzeigen

MrMurphy · 16. November 2023

Ein Online-Beispiel wäre sinnvoll. So können wir nur raten.

Ich fange mal an: Die Pfadangabe oder der Dateiname stimmen nicht.

Lupus_III · 16. November 2023

Ich habe weitergetestet. Jetzt hat es geklappt! Danke MrMurphy. Hier kommt der Code =>

HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="fonts.css">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Fonts lokal einbinden</title>
    
</head>
<body>
    <h1>Titel 1</h1>
    <h2>Titel 2</h2>
    <h3>Titel 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt ab, non dicta, repudiandae aliquam asperiores dolor mollitia fugiat, accusamus quis nam aperiam quaerat illo ea repellendus facilis eaque eveniet. Tempore.
    Quisquam eveniet ab ut eos hic corrupti voluptates sint iste asperiores, vitae eius nobis ducimus voluptate molestias maiores ipsa placeat earum. Voluptate esse temporibus quos placeat tenetur a, voluptatibus distinctio?
    Voluptatum nemo saepe, officiis accusamus porro a ab, eos laudantium ducimus doloribus doloremque laborum voluptate iure architecto sunt molestias cum sed sequi eius rerum suscipit. Perspiciatis sint eaque quia necessitatibus?
    Culpa debitis iure iste. Perferendis quas culpa quasi repudiandae cupiditate a cum maxime sed debitis obcaecati corporis in voluptatum incidunt aliquid doloribus sit necessitatibus beatae eum, aliquam tempora dolorem sequi?
    Aut expedita reprehenderit aperiam fugit exercitationem sunt magnam assumenda nesciunt eveniet atque, placeat similique mollitia, accusamus, obcaecati error natus architecto labore asperiores vero porro voluptatibus culpa eligendi qui repellat? Voluptatem.
    Dolore ea aliquid cupiditate doloremque corrupti sequi quo maiores illum autem earum! Quae obcaecati voluptates dolorum minus sint. Nam debitis impedit repellendus a harum et corporis iusto officia illum aliquam?
    Impedit sequi accusantium maiores, facilis inventore sunt fugit, aspernatur laudantium dolor et amet excepturi, quae ad eaque laborum! Consectetur modi a eligendi reiciendis asperiores dolores fugiat itaque eveniet, ea deleniti?
    Dignissimos nobis saepe consequatur eveniet doloribus et quos aliquid ut dolorum nihil voluptatibus beatae eligendi vel quo nemo similique culpa, explicabo labore perspiciatis nam? Labore ea amet corrupti eveniet qui.
    Aperiam voluptatem ut est iste corporis necessitatibus, voluptatum similique? Odit, officia. Voluptatibus aliquam harum veritatis aliquid, reiciendis asperiores est omnis, hic corporis iure quidem. Corrupti laboriosam possimus ea dignissimos nesciunt!
    Voluptas similique, maiores earum veritatis numquam accusantium tempore, nobis repellendus ducimus corrupti sapiente. Recusandae tempore reiciendis dolore explicabo cumque amet in, aperiam itaque at sequi, saepe sint perspiciatis, atque ab.
    Iste, itaque! Dolorum quis impedit, vitae harum laborum modi quam ab perferendis suscipit dicta maxime quia alias minima voluptate quae cupiditate consequuntur dignissimos necessitatibus repellendus nisi id accusantium soluta blanditiis?
    Repellat, illo quaerat cum eos minus blanditiis deleniti porro iusto quos tempore, ad inventore molestias recusandae, molestiae hic? Omnis, impedit! Sapiente aliquid maiores possimus reprehenderit? Placeat laboriosam suscipit ullam quia.
    Fuga vel laboriosam blanditiis perspiciatis necessitatibus optio odit, nihil doloribus at. Non, molestias inventore iure possimus autem architecto ducimus exercitationem animi commodi nisi mollitia maiores quae placeat voluptatem officia rem.
    Cum odio cupiditate deleniti reiciendis asperiores voluptate. Odio, quam nam? Officiis, laborum atque, ratione impedit cupiditate repudiandae numquam temporibus repellendus quam quidem minima laboriosam aliquid dignissimos optio hic, ut iusto.
    Earum ab hic, est nemo nostrum consectetur incidunt pariatur natus. Explicabo placeat officiis illum excepturi consequuntur dicta in dolorum, quod officia aperiam similique molestiae laboriosam a odit optio. Tempore, ut!
    Sequi, rem quas aut possimus culpa sunt, nam accusamus porro dolor animi odio, ut quis commodi iusto deleniti provident. Officia ducimus atque asperiores harum aspernatur blanditiis voluptates, voluptatem veritatis tempore!
    Provident libero labore, itaque quisquam dolor, alias eaque quasi harum aperiam quos vero praesentium velit totam iste, impedit sit rem qui tempore magni. Fugiat, eaque necessitatibus consequuntur iste delectus quos.
    Numquam eius maxime, repudiandae totam harum sed, libero non explicabo ex consequatur esse magnam, enim praesentium veniam ad atque minima! Recusandae unde adipisci enim iste minus inventore accusamus, quasi perferendis!
    Quia enim voluptate minima recusandae impedit saepe est quos. Vero, impedit sapiente ipsa animi aspernatur ut voluptates, blanditiis dignissimos aliquam, dolorum exercitationem omnis laudantium! Quo perspiciatis non aperiam harum sint.
    Adipisci provident blanditiis facere distinctio corrupti? Dolorum, maxime? Quod, eveniet nisi illum placeat nam harum sapiente aperiam voluptas id dolore quae cumque magni rerum saepe magnam incidunt fugit esse eius?
    Itaque amet quis debitis error facere sequi voluptates reprehenderit, non maiores sunt modi veniam tempore suscipit, maxime impedit eos corporis voluptatibus aut placeat. Officia in cum facilis possimus, dolores voluptates?
    Exercitationem natus rem ab placeat tenetur ad veritatis. Aperiam pariatur praesentium impedit voluptatem voluptate nulla ullam possimus placeat atque esse vitae, quidem rem modi, unde neque autem quas sunt. Molestias.
    Officia nostrum expedita commodi tempore fuga rem voluptates cumque voluptate vero, molestiae sunt perferendis ratione, ullam magnam officiis quia! Excepturi, sunt nisi! Velit totam numquam optio sapiente sit ipsa asperiores!
    Molestiae ad rerum pariatur aliquid illo molestias ipsa consectetur, ipsum error accusamus aut nulla minus laudantium alias illum, aperiam doloremque quos quis commodi magni dolorum maiores? Facere fugit eos esse!
    </p>
</body>
</html>

Alles anzeigen

CSS-Fonts

Code

/* poppins-500 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: local(''),
         url('poppins-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('poppins-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local(''),
         url('roboto-v30-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('roboto-v30-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* klavika */
@font-face {
  font-family: 'Klavika';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('fonts/klavika/klavika-bold-italic.otf') format('otf'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
 /* Poetsen */
 @font-face {
  font-family: 'Poetsen';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('PoetsenOne-Regular.ttf') format('TrueType'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('PoetsenOne-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}

Alles anzeigen

CSS-Style

Code

html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poetsen';
}
h1,h2,h3{
    font-family: 'Poetsen';
    padding:  5px 15px 5px 15px;
}
p{
    font-family: 'Klavika';
}

Alles anzeigen

Webfonts in Webseite einbinden

Jetzt mitmachen!

Teilen

Tags