CODEWITHSUNDEEP
htmlcss
Sn0ww__
Sn0ww__

Reputation: 3

Font-family works on mobile but not showing on desktop

I have a quick question. I have a webpage, that has a specific font-family in just one page and in just one span set up like this:

<style>
span{
    text-align: center;
    font-family: 'Lobster', cursive;
    font-size: 48px;
}
</style>

And it shows and looks great on any smartphone browser (any of the browsers that I use in my phone and I even tried with other 2 devices, IOS and Android) but it just throws a common font in ANY computer browser that I look for.

Any thoughts? I've seen that some people have the same problem but in the other way, showing on desktop browser but not on mobile... that's why I came here to ask.

EDIT: I don't have any other specified fonts anywhere else or for the general page.

Upvotes: 0

Views: 1556

Answers (1)

Sydney Y
Sydney Y

Reputation: 3152

Forgive me if any of this is obvious to you already.

Lobster is a web font, and in order to use it the browser has to download a copy. In some cases the browser may already have a copy cached if it has encountered the font somewhere else.

The fallback you've specified, cursive, doesn't seem to be widely recognised so you'll probably see a browser-default font. I think you'll commonly see the last fallback as 'serif' or 'sans serif'. 'cursive' doesn't cause an error, but at least my version of Chrome doesn't have a cursive fallback so I see a serif font.

The browser also has default behaviour regarding how long it will wait for your custom font before it just shows a backup so your visitor can get reading. You may need to set the font-display property to overcome that. https://www.w3.org/TR/css-fonts-4/#valdef-font-face-font-display-swap. The reason you see different behaviour in mobile vs desktop may be due to the browser's performance priorities. Mobile browsers have different standards for 'slow'.

You also need to tell the browser where to get the font if you haven't already. Lobster is available through Google so you can use this element to import the font:

<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

You can customise it and get a different element on this site: https://fonts.google.com/specimen/Lobster?sidebar.open&selection.family=Lobster#standard-styles

Upvotes: 1

Related Questions