Fonts: font-medium doesn't work when installing and configuring material-tailwind in my application

[jovemdan]

Hi 👋

I have an application using Next 13 with app directory, and before installing material-tailwind all my fonts and colors were working normally. After installing the library I noticed in the browser that font-normal and font-medium stopped differentiating.

before installation

after installation

my tailwind.config.js

/** @type {import('tailwindcss').Config} */
const withMT = require('@material-tailwind/react/utils/withMT')

module.exports = withMT({
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    fontFamily: {
      sans: ['Open Sans', 'sans-serif'],
    },
    extend: {
      backgroundColor: {
        radio: '#DCDCDC',
      },
      colors: {
        'white-50': '#FCFCFC',
        'white-100': '#F4F4F4',
        'white-300': '#E8E8E8',
        'black-300': '#545454',
        'red-light': '#E8C5C2',
        'red-dark': '#88322B',
      },
    },
  },
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: '#B5433A',
          'base-100': '#FCFCFC',
          success: '#56AB5E',
        },
      },
    ],
    styled: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
    prefix: '',
    darkTheme: 'dark',
  },
  plugins: [require('daisyui')],
})

All help is welcome 👋

[namevug]

up!

[pceolato]

up

[AKK9]

I had this problem and solved it by using Googles Instructions to add the font to my app: https://fonts.google.com/knowledge/using_type/using_web_fonts_from_a_font_delivery_service

And made sure that the URL is requesting the relevant weights. For example: https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap

I don't know exactly which weights Material Tailwind uses, but I think medium is usually 500.