Почему не работает настройка font-weight?

Question

[ceeed]

Не понимаю почему не работает настройка font-weight: 600, даже если я ставлю любое значение - ничего не меняется. В чем может быть дело?
Я подключил шрифт вот так


Вот код компонента кнопки, но ничего не работает.

<template>
  <div class="v-button">
    <div class="tables pt-10 mr-10 w-full">
      <div class="flex">
        <button
          type="submit"
          @click.prevent="this.$emit('upGetStatisctics')"
          class="button mt-2  focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-500 hover:bg-gray-600 hover:shadow-lg"
          :class="size"
        >
          SEND ORDER
          <slot></slot>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "v-button",

  emits: ["upGetStatisctics"],

  props: {
    size: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped>
.button {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  font-family: Gilroy;
  width: 131px;
  height: 46px;
  padding: 16px 24px;
  left: 48px;
  top: 724px;
  background: linear-gradient(270deg, #8743ff 0%, #4136f1 100%);
  border-radius: 5px;
}
</style>

Comments

[Lynn «Кофеман»]

font-family везде должен быть Gilroy

[ceeed]

Lynn «Кофеман», Так он и так везде такой..

[Даниил Галустов]

У меня похожая проблема решилась изменением порядка подключения от тонкого к жирному. Сначала прописываем normal (400), потом 600, потом 700...

Answer 1

[Ankhena]

1. Название шрифта всюду должно быть одинаковым, просто font-family: Gilroy
2. В подключении указывайте жирность
3. Если вы не поддерживаете совсем уж древности, то достаточно форматов woff2 и woff

Пример:

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
        }

Comments

[ceeed]

Я сделал по вашему образцу. Все равно ничего не меняется.

@font-face {
	font-family: "Gilroy-Black";
	src: url("../fonts/gilroy-black.woff2") format("woff2"),
	url("../fonts/gilroy-black.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	}

[Ankhena]

ceeed, вроде по-русски пишу
не
font-family: "Gilroy-Black";
а
font-family: "Gilroy";

и black это 900, а не 600
600 это Semi Bold (Demi Bold)

[hellcaster]

Еще было б хорошо указать local, на тот случай, если шрифт уже установлен у пользователя (не нужно будет скачивать его). Примерно так будет выглядеть

@font-face {
    font-family: 'Gilroy';
    font-weight: 900;
    font-style: normal;

    font-display: swap;
    src: local('Gilroy Black'), local('Gilroy-Black'),
        url('./fonts/Gilroy-Black.woff2') format('woff2'),
        url('./fonts/Gilroy-Black.woff') format('woff'),
        url('./fonts/Gilroy-Black.ttf') format('truetype');
}

/* other fonts ... */

[Ankhena]

hellcaster,

Еще было б хорошо указать local, на тот случай, если шрифт уже установлен у пользователя (не нужно будет скачивать его).

О да.
Особенно много радости это приносит, когда на компе у пользователя установлен кривой шрифт.
Или шрифт без кириллицы или шрифт без расширенной кириллицы, а она нужна.
И подобные фокусы.