Different font on mobile and desktop

Navigation
0

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

Desktop Menu

MobileMenu

MyCSSlookslikethis:

.menua{font-family:'PoiretOne',cursive;}

AndIimportthefontthisway:

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

Does anyone know how I can make it load the font correctly on mobile?

@edit I'll put 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;
}
    
asked by anonymous 14.05.2018 / 18:16

1 answer

1

It's no use testing in the mobile mode of your PC's browser. It will not render with 100% accuracy from a webview of Android or IOS. I noticed you called two CSS files: 

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

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

On the fonts files, have you tried to change the order in which they are declared in HTML? Also check if in your CSS file if the desired font is declared.

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

    
14.05.2018 / 20:33
Page in PHP connects to the bank, loads but does not shut down GDrive API Upload files javascript