We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 54062
    • 18 Posts
    Hi,

    I am redesign a website for a client (https://www.dev.stephan-fuhrer.ch/) and I am using 2 different Google fonts.

    I can display them on desktop but not on mobile.

    Am I linking them wrong?

    Here what I have in CSS:

    
    @import url('https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,500,500i,600,600i,700,700i');
    
    @import url('https://fonts.googleapis.com/css?family=Kanit:400,400i,500,500i,600,700,800');
    
    body {
      font-family: 'Zilla Slab', serif !important;
    }
    
    h1 {
      font-family: 'Kanit', sans-serif;
      text-transform: uppercase;
      color: #e63f2f;
      font-size: 20px;
    }
    
    h2 {
      font-family: 'Kanit', sans-serif;
      text-transform: uppercase;
      color: #e63f2f;
    }
    


    Update:

    I solved this by including this in the Head chunk after the <script> tag

    
    <link href="https://fonts.googleapis.com/css?family=Zilla+Slab:400,700" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css?family=Kanit:500,600,700" rel="stylesheet">
    
    


    Thanks for the help.

    This question has been answered by nowords. See the first response.

    [ed. note: nowords last edited this post 8 years, 4 months ago.]
      • 17301
      • 932 Posts
      Yes that's correct. Is it only android ios that it's not working for? Are you using the android browser, chrome, firefox or something else?
        ■ email: [email protected] | ■ website: https://alienbuild.uk

        The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
        • 54062
        • 18 Posts
        Quote from: lkfranklin at May 31, 2018, 02:24 AM
        Yes that's correct. Is it only android ios that it's not working for? Are you using the android browser, chrome, firefox or something else?

        I tried on Chrome for Android and Safari on iOS.

        On desktop (Mac and Windows) it works properly (with different browsers).

        I can't really figure out why sad
          • 17301
          • 932 Posts
          It's a little hard to inspect your CSS as it's all combined and minified but try disabling minifyX and see if the problem persists, just incase the browser is having issues reading it.
            ■ email: [email protected] | ■ website: https://alienbuild.uk

            The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
            • 54062
            • 18 Posts
            Quote from: lkfranklin at May 31, 2018, 03:01 AM
            It's a little hard to inspect your CSS as it's all combined and minified but try disabling minifyX and see if the problem persists, just incase the browser is having issues reading it.

            I tried to deactivate MinifyX and the fonts is still not working on mobile. Plus I loose the CSS style.

            Mmmhhh...
              • 17301
              • 932 Posts
              I see you marked this as answered. What was the solution in the end?
                ■ email: [email protected] | ■ website: https://alienbuild.uk

                The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
                • 54062
                • 18 Posts
                Quote from: lkfranklin at May 31, 2018, 06:25 AM
                I see you marked this as answered. What was the solution in the end?

                Sorry I marked for mistake sad

                Still no solution
                  • 3749
                  • 24,544 Posts
                  The fonts on that page look exactly the same to me on my android phone and my desktop, so maybe you've fixed it. I used Chrome on both, and Windows for the desktop. I don't have iOS to test with.
                    Did I help you? Buy me a beer
                    Get my Book: MODX:The Official Guide
                    MODX info for everyone: http://bobsguides.com/modx.html
                    My MODX Extras
                    Bob's Guides is now hosted at A2 MODX Hosting
                    • 54062
                    • 18 Posts
                    Quote from: BobRay at May 31, 2018, 11:40 PM
                    The fonts on that page look exactly the same to me on my android phone and my desktop, so maybe you've fixed it. I used Chrome on both, and Windows for the desktop. I don't have iOS to test with.

                    Hi,

                    No I did not fixed it. Still same problem on iOS and Android.

                    Plus, if you have a look at this screenshot I made also the hamburger menu icon is not correctly displayed.

                    Screenshot: https://www.dev.stephan-fuhrer.ch/assets/images/Screenshot_20180601-091758.png

                    I also tried to use this in the Head without results:

                    
                    <link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
                    <link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
                    
                    


                    Really strange :/
                      • 17301
                      • 932 Posts
                      I just checked on my android using the android browser and it works fine for me. Fonts + menu icon.
                        ■ email: [email protected] | ■ website: https://alienbuild.uk

                        The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.