0

No meu CSS eu coloquei a fonte Poiret One no menu do meu site. Mas quando eu abro no celular, a fonte fica totalmente diferente.

Menu Desktop Menu Desktop

Menu Mobile inserir a descrição da imagem aqui

Meu CSS está assim:

.menu a{
    font-family: 'Poiret One', cursive;
}

E importo a fonte dessa forma:

  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

Alguém sabe como eu faço para que no mobile ele carregue corretamente a fonte?

@edit Vou colocar mais código para ajudar

<head>
    <title>Avance Sistemas e Consultoria</title>

    <link rel="shortcut icon" href="view/img/favicon.ico" type="image/x-icon">
    <link rel="icon" href="view/img/favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

    <script type="text/javascript" src="view/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="view/js/bootstrap.js"></script>

    <link rel="stylesheet" href="view/css/bootstrap.min.css">
    <link rel="stylesheet" href="view/css/styleGlobal.css">
    <link rel="stylesheet" href="view/css/styleCellphone.css">
    <link rel="stylesheet" href="view/css/fontawesome-all.css">
    <link rel="stylesheet" href="view/css/animate.css">


</head>

-

@media(max-width: 1080px) {
    .menu a{
        font-family: 'Poiret One', cursive;
        font-size: 35px;
}
8
  • O css responsível esta selecionando uma fonte diferente da sua. Você precisa encontra-lo. Coloque o link para página se tiver
    – Sveen
    14/05/2018 às 16:18
  • Infelizmente só consigo rodar local, mas vou dar uma olhada no código fonte pra ver se chama outra fonte alem das que eu quero 14/05/2018 às 16:21
  • Olhando nos meus arquivos CSS, a única fonte que eu achamo é essa mesmo Poiret One 14/05/2018 às 16:22
  • Inclua o link para a font antes do seu ficheiro css. Se possível verifique as requisições de rede no seu dispositivo. Já em ultimo recurso use o atributo !important.
    – lazyFox
    14/05/2018 às 16:24
  • Cara coloque o código inteiro da sua pagina na pergunta inclusive com o head só assim é possível te dar uma reposta mais precisa...
    – hugocsl
    14/05/2018 às 16:31

1 Resposta 1

1

Não adianta testar no modo mobile do browser do seu PC. Ele não vai renderizar com 100% de precisão de uma webview do Android ou do IOS. Eu notei que você chamou dois arquivos CSS:

<link rel="stylesheet" href="view/css/styleGlobal.css">
<link rel="stylesheet" href="view/css/styleCellphone.css">

Não compensaria neste caso você criar um CSS único e chamar esses dois arquivos via @import? Outra coisa que eu notei é que você chamou primeiro os arquivos JS para depois chamar os arquivos CSS. Por boa prática, coloque os JS após os CSS de sua página.

Sobre os arquivos fonts, já tentou mudar a ordem em quem eles são declarados no HTML? Verifique também se no seu arquivo CSS se a font desejada está declarada.

Bom, é isso que eu consigo te dizer olhando o seu código.

2
  • 1
    Criar outro arquivo CSS importando os dois atuais faria com que o navegador precisasse efetuar 3 requisições ao invés de duas, então não vejo vantagens. Porém, se minificá-los e concatená-los em apenas um arquivo, sim, teria algum ganho.
    – Woss
    14/05/2018 às 18:48
  • 1
    Trocar a ordem funcionou!! Obrigado 14/05/2018 às 20:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .