Как сделать шрифт google fonts кроссбраузерным?

Question

[Alexander]

Подскажите пожалуйста как сделать шрифт google fonts кроссбраузерным. Есть заголовок со шрифтом Ubuntu, который отлично отображается в chrome и opera, но в firefox переносит текст на другую строчку, хотя ширина блока одна и таже как у всех браузерах, как это можно пофиксить. Использую подключение шрифта через link в head.

<link
            href='https://fonts.googleapis.com/css2?family=Exo+2&family=Ubuntu:wght@400;500&display=swap'
            rel='stylesheet'
          />

Буду благодарен за ответ

Также использую normalize и следующий сброс

export const GlobalStyles = createGlobalStyle`
${normalize}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::after,
*::before {
  box-sizing: border-box;
}


body { 
  font-family: ${({ theme }) => theme.fonts?.primary};
  font-size: 16px;
  line-height: 1;
  background-color: ${({ theme }) => theme.palette?.bg.primary};
  transition: all ${({ theme }) => theme.transition}
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,h2,h3,h4,h5,h6 {
  margin: 0;
}
a {
  text-decoration: none;
}
`

Comments

[iBird Rose]

покажи скрином как должно быть, и как выглядит в firefox. скорее всего дело не в шрифте, а в стилях других

[Alexander]

iBird Rose, как раз таки в шрифтах, подключил 400, 500, 700 для каждого и проблема решилась

<link
            href='https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap'
            rel='stylesheet'
          />

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

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

[Alexander]

Lynn «Кофеман», к чему этот коментарий? Это и так понятно

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

К тому что глупо пытаться решать одну частную проблему.

В FF текст отрендерился чуть шире и перестал помещаться в ваш блок. Это нормально и нужно с этим уметь жить. Например запретить переносы в этом блоке и смириться с выступающим за пределы блока текстом в FF.

А пока ваш вопрос похож на попытку сверстать pixel perfrect, вместо решения реальной задачи.

[Василий Банников]

Alexander, А ещё должно быть понятно, что невозможно сверстать pixel perfect на всех браузерах, на всех ОС.
Если это очень критично - вставляй текст картинкой.