Different font on mobile and desktop

Asked

Viewed 576 times

0

In my CSS I put the font Poiret One in the menu of my site. But when I open it on the mobile phone, the font is totally different.

Desktop Menu Menu Desktop

Menu Mobile inserir a descrição da imagem aqui

My CSS is like this: 

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

And I import the source that way:

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

Does anyone know how I do so that in the mobile it correctly loads the source?

@Edit I’ll put in more code to help

<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;
}
html css css-font-face

  • The responsive css is selecting a different font than yours. You need to find it. Link to page if you have

  • Unfortunately, I can only run locally, but I’ll check the source code to see if it calls another source other than the ones I want

  • Looking in my CSS files, the only source I find is this same Poiret One

  • Include the font link before your file css. If possible check the network requests on your device. Already in last resource use the attribute !important.

  • Guy put the entire code of your page in the question even with the head only so it is possible to give you a more accurate answer...

  • added the head there, if I put everything will be huge.

  • Cara tries this, goes in Chrome Devtools, put as responsive, inspects the element that is with the wrong source. Ai in the right part of Devtools goes in the "Computed" tab it is on the side of the Style tab where you have the css. In this tab Computed looks for the font-family, click on the little arrow there and it will expand which source the element is using and where this font is coming from.

  • So, but in Chrome, even in the mode that simulates the mobile it gets the right source, only changes the source even when I open by mobile browser(which is Chrome too) cell phone

Show 3 more comments

1 answer

1


No use testing in the mobile browser mode of your PC. It will not render with 100% accuracy of an Android or IOS webview. I noticed that you called two CSS files:

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

It would not compensate in this case if you create a single CSS and call these two files via @import? Another thing I noticed is that you first called the JS files and then called the CSS files. For good practice, put the JS after the CSS of your page.

About fonts files, have you tried changing the order in which they are declared in HTML? Also check that in your CSS file the desired font is declared.

Well, that’s what I can tell you by looking at your code.

  • 1

    Creating another CSS file by importing the current two would make the browser need to make 3 requests instead of two, so I see no advantages. But if you minify them and concatenate them into one file, yes, you would have some gain.

  • 1

    Changing the order worked!! Thank you

Browser other questions tagged html css css-font-face

You are not signed in. Login or sign up in order to post.