Nabla font doesn’t have the correct fill color on iPhones

Question

Nabla font doesn’t have the correct fill color on iPhones

109 Views Asked by adam At 19 November 2023 at 20:33

This is how the font should be displayed on iPhone

In my code I only adjust the font size when making the site mobile friendly. On Android phones it appears 'normal' with the text as the color orange. I've had this occur on safari and chrome on all iphones.

Below is my entire CSS file as well as my HTML where I link the google font, any ideas?

HTML (where I link to the google font)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match Game</title>
    <link rel="stylesheet" href="./styles.css">
    <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=Caveat&family=Libre+Baskerville&family=Nabla&display=swap" rel="stylesheet">
    
</head>

CSS (where I declare the Google Font and make adjustments for smaller screen sizes)


h1, p, #playAgain, button{
    font-family: 'Nabla', sans-serif !important;
}



@media (min-width: 319px) and (max-width: 480px) {
    h1{
        font-size: 3.5rem; 
    }


    #normal, #hard{
        font-size: 3rem;
    }

    .front{
        border-radius: 0.25rem;
    }

    .back, img{
        border-radius: 0rem;
    }

    #buttonContainer{
        margin-top: 50px;
    }
}

@media (min-width: 481px) and (max-width: 991px){
    h1{
        font-size: 5rem;
    }

    .front{
        border-radius: 0.5rem;
    }

    .back, img{
        border-radius: 0rem;
    }

    #buttonContainer{
        margin-top: 25px;
    }

    #normal, #hard{
        font-size: 3rem;
    }
}

@media (min-width: 992px){
    h1{
        margin: 0;
    }

I was expecting the Google Font to appear orange like it does on desktop and Android devices.

Original Q&A

There are 1 best solutions below

**Brett Donald** · Answer 1 · 2023-11-27T06:18:04.363000

Adding a snippet for testing on iOS.

@import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap');

body {
  font-family: Nabla;
  font-size: 40px;
}

It was the best of times, it was the worst of times

It renders as follows for me on iOS 17.1.1:

Nabla’s product page claims that:

Nabla is currently only supported in Chrome.

With the exception of Chrome on iOS, because there Chrome uses the WebKit rendering engine as mandated by Apple. So Chrome on iOS renders identically to Safari. (As soon as WebKit adds support, all iOS browsers will get the feature.)

Nabla’s product page refers visitors to this entry on caniuse for tracking browser support for the underlying technology.

Nabla font doesn’t have the correct fill color on iPhones

There are 1 best solutions below

Related Questions in CSS

Related Questions in WEBFONTS

Trending Questions

Popular # Hahtags

Popular Questions