Search code examples
tailwind-cssfont-face

Why isn't my downloaded font displaying correctly?

I downloaded a font, and in a zip came multiple files. I followed the instruction in the .txt file, which told me to put it in as a font face. However, when I put it in, it looks nothing like the font I downloaded. Is this a thing with Chrome, and if it is, what do I do now? Also, is there an easier way to turn a Figma design into HTML CSS? It's always a pain.

CSS:


@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');

@font-face {
    font-family: 'Spartan-MB-SemiBold', sans-serif;
    src:url('./assets/Spartan-MB-SemiBold.ttf.woff') format('woff'),
        url('./assets/Spartan-MB-SemiBold.ttf.svg') format('svg'),
        url('./assets/Spartan-MB-SemiBold.ttf.eot'), format('embedded-opentype');
        font-weight: normal;
        font-style: sans-serif;
}

h1 { 
    font-family: 'Spartan-MB-SemiBold';
 }

TAILWIND OUTPUT (some of it)

.font-spartan {
  font-family: Spartan, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-title-text {
  color: 579229;
}

@font-face {
  font-family: 'Spartan-MB-SemiBold', sans-serif;

  src:url('./assets/Spartan-MB-SemiBold.ttf.woff') format('woff'),
        url('./assets/Spartan-MB-SemiBold.ttf.svg') format('svg'),
        url('./assets/Spartan-MB-SemiBold.ttf.eot'), format('embedded-opentype');

  font-weight: normal;

  font-style: sans-serif;
}


h1 {
  font-family: 'Spartan-MB-SemiBold';
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudyConnect</title>
    <link rel="stylesheet" href="./tailwind/output.css">
</head>
<body class="">
    <nav class="w-100% h-10% text-2xl">
        <div class="flex mx-auto px-4 flex items-center justify-between">
            <div class="flex">
                <img src="./assets/rocketpencilgreen-removebg-preview.png" alt="logo" class="h-16 w-16">
                <h1 class="flex flex-end mt-4 bold font-spartan text-title-text">StudyConnect</h1>
            </div> 
        </div>
    </nav>
    <div class="slide-1">

    </div>
</body>
</html>

TAILWIND CONFIG

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["index.html"],
  theme: {
    extend: {
      colors: {
        'navbar-left': '#E8FFDA',
        'navbar-right': '#67FB0D',
        'title-text': '579229',
        'login-button': '#B9E198',
        'login-text': '#102400',
        'square-one': '#FFECA9',
        'square-two': '#FF9393',
        'square-three': '#93D3FF',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      },
      fontFamily: {
        'league-spartan': ['League Spartan', 'sans-serif'],
        'spartan': ['Spartan', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Thanks!

Solution

  • this looks wrong:

    
      fontFamily: {
        'league-spartan': ['League Spartan', 'sans-serif'],
        'spartan': ['Spartan', 'sans-serif'],
      },

    try:

    
      fontFamily: {
        'spartan': ['Spartan-MB-SemiBold', 'sans-serif'],
      },