Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida sobre a fonte

Boa tarde. Estou tendo dificuldades para aplicar a fonte. Segue um trecho do meu código:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Magic MK Newsletter</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https: //fonts.googleapis.com/css2?family= Ysabeau +Infant:wght@300 & display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend:{
                    colors:{
                        cores: {
                            rosa: '#E90064',
                            lilas:'#F2D8D8',
                            escuro:'#4D455D',
                            rosaclaro:'#FF90BB'
                        }, 
                
                    },
                    fontFamily: {
                        'fonteprincipal': ['Ysabeau Infant', 'sans-serif']
                    },
                    keyframes: {
                        chacoalhar_kf: {
                            '0%, 100%': {
                                transform: 'rotate(-10deg)'
                            },
                            '50%': {
                                transform: 'rotate(10deg)'
                            }
                        }
                    },
                    animation: {
                        chacoalhar: 'chacoalhar_kf 0.31s ease-in-out infinite'
                    }
                }
            }
        }
    </script>
</head>

<body class="bg-cores-lilas font-fonteprincipal flex justify-center items-center h-screen">
2 respostas

Oi Andreza, tudo bem contigo?

Eu gostaria de somente informar que eu não consegui observar o problema mencionado em seu post!

Com o código fornecido não foi me retornado nenhum comportamento fora do desejado.

Eu testei ele e pensei em coisas que poderiam estar atrapalhando e a única coisa que foi possível identificar foi o link que foi escrito com espaços, mas o navegador é capaz de ignorar eles e fazer tudo funcionar da mesma forma!

Ademais tendo o código postado como base para testes não me ocorreu em momento algum nenhum problema com o carregamento da fonte, a única coisa à se mencionar seria a questão dos espaços no link que deveria estar assim:

<link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">

E o outro ponto seria que a fonte escolhida somente é muito parecida com o padrão do navegador, portanto quase não dá para perceber a diferença, pois ela é muito sutil, mas existe.

Caso o problema persiste peço que compartilhe o código completo para que eu possa lhe ajudar melhor.

Era isso, fico à disposição.

Abraços e bons estudos.

solução!

Obrigada pela atenção, eu acabei por fazer com a fonte que a própria biblioteca oferecia.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software