CSS font-face help needed: Default browser and Dolphin browser

[fafabone]

Does someone know how to set font-face rule in css, order to see properly a new font in a webpage? I see properly the font in
IE8+
Firefox4+
Opera
Safari2+
but I can't in Default Android browser and Dolphin browser
This is my web-site -> look at the font-face of the sliding text:
@@puzzlefixgame.com@@
Help me, please!

 

[MoodyBlues]

Hello, fafabone. I edited your subject to make it more descriptive, since it's CSS that you need help with.

I looked at your site on my laptop and my phone, in the default browser on the latter, and I see what you mean. Unfortunately, I don't know enough about CSS to help you. But someone else will surely come along who can.

 

[mikedt]

Does someone know how to set font-face rule in css, order to see properly a new font in a webpage? I see properly the font in
IE8+
Firefox4+
Opera
Safari2+
but I can't in Default Android browser and Dolphin browser
This is my web-site -> look at the font-face of the sliding text:
@@puzzlefixgame.com@@
Help me, please!

Seems to be fine using the default browser and Naked Browser on my Samsung phone with Jellybean. Scrolling messages in a blue casual looking font, yes? It looks exactly the same in Firefox on my Mac as well.

Don't know about Dolphin Browser, that's some Chinese thing and I don't use it.

 

[MoodyBlues]

Seems to be fine using the default browser and Naked Browser on my Samsung phone with Jellybean. Scrolling messages in a blue casual looking font, yes? It looks exactly the same in Firefox on my Mac as well.

They're completely different for me, depending on which device (computer vs phone) and browser (any of my regular browsers on the former vs the default Android browser on the latter). I actually like the cool font that shows up [for me] on my phone, but that doesn't help the OP!

 

[mikedt]

They're completely different for me, depending on which device (computer vs phone) and browser (any of my regular browsers on the former vs the default Android browser on the latter). I actually like the cool font that shows up [for me] on my phone, but that doesn't help the OP!

I'm thinking the problem actually lies with this cool font, I believe it's called Hobo. AFAIK this is not a standard font in most OSs, whether desktop or mobile. Which means the browser has to download it on demand from somewhere when rendering the page. Which could be where the problem lies, some browsers are not downloading the Hobo font, or it's unavailable for download when required. Since this morning I've also tried it in Safari and Opera on my Mac, Opera on my Android phone, and it's still showing correctly, every time.

I'm sure this is a HTML5 thing, to try and make web-pages look more interesting and cool. Rather than just rendering text in the usual Times Roman, Arial, Courier or whatever. i.e. standard fonts that all OSs should have, or a near equivalent to them.

EDIT:

A bit of further testing and investigation. I just tried puzzlefixgame.com in the Chinese Dolphin Browser on my phone, the text and font still appears to be OK. Although I've now removed Dolphin, because I don't really want too many browsers installed on my phone...LOL. So perhaps it was a problem with the Hobo font not downloading correctly?

 

[MoodyBlues]

I'm thinking the problem actually lies with this cool font, I believe it's called Hobo. AFAIK this is not a standard font in most OSs, whether desktop or mobile. Which means the browser has to download it on demand from somewhere when rendering the page.

I don't know. I am not--by ANY stretch of the imagination--a CSS expert, but I'm reasonably sure that there's code that handles font faces, i.e., specifies fonts or families of fonts, and what to do if they're not available. For example, let's say the fonts include A, B, C, and D, falling back on E, F, and G. I don't have C, so when I view the page I see F, which I do have. I THINK that's what is happening here and what the OP needs to adjust. But I can't help him.

Since this morning I've also tried it in Safari and Opera on my Mac, Opera on my Android phone, and it's still showing correctly, every time.

I wonder if we're seeing the same thing. Maybe we should post screenshots...

I'm sure this is a HTML5 thing, to try and make web-pages look more interesting and cool. Rather than just rendering text in the usual Times Roman, Arial, Courier or whatever. i.e. standard fonts that all OSs should have, or a near equivalent to them.

I don't know. Maybe it is.

 

[mikedt]

Here's some screen-shots from my phone, three different browsers, Opera, Naked Browser and the default one.



To me it looks pretty much the same in all of them, and it was the same in Dolphin as well. And the same in Firefox, Opera and Safari on my Mac. Can't try Linux at the moment, as that laptop is at my other apartment.

So myself, I can't see any problem here...


....although at this exact moment of posting, the whole site appears to be down. It's not doing anything.

 

[MoodyBlues]

Here's some screen-shots from my phone, three different browsers, Opera, Naked Browser and the default one.

View attachment 59109View attachment 59110View attachment 59111

To me it looks pretty much the same in all of them, and it was the same in Dolphin as well. And the same in Firefox, Opera and Safari on my Mac.

So you're seeing that 'cute' font (that I like!) regardless of whether you're viewing the site from a computer or phone? See, I'm not. It's completely different depending on which device I'm using. I'm only seeing the cute font on my phone--which I believe is the same situation the OP experiences.

 

[9to5cynic]

With CSS there is a fallback font setting. It's been a while, but I think the syntax is something like:

Font-family: cutefont, notcutefont, sans-serif;

???

 

[mikedt]

So you're seeing that 'cute' font (that I like!) regardless of whether you're viewing the site from a computer or phone? See, I'm not. It's completely different depending on which device I'm using. I'm only seeing the cute font on my phone--which I believe is the same situation the OP experiences.

You're still seeing the blue text, but it's not in the "cute font" on your computer, it's just appearing in default Arial(sans-serif) or Times Roman(serif) or whatever?

Looking at the site's code, it's definitely specifying a font called HoboStd. And if the browser and OS doesn't have it, it has to download it from somewhere, or fall-back to something that it thinks is appropriate. Which I believe is what Ajax, HTML5, etc are supposed to do. HoboStd is a decorative font (You wouldn't write your resume in it.. ), not sure what a near or related family of fonts would be for it, Comic Sans, Arial, sans-serif?

Might be worth the OP contacting the people who designed the site, theme or template. jacoposcarabelli.it ...which looks like an Italian, professional design company. See what they have to say about it.

 

[MoodyBlues]

You're still seeing the blue text, but it's not in the "cute font" on your computer, it's just appearing in default Arial(sans-serif) or Times Roman(serif) or whatever?

Yes, exactly.

Looking at the site's code, it's definitely specifying a font called HoboStd. And if the browser and OS doesn't have it, it has to download it from somewhere, or fall-back to something that it thinks is appropriate. Which I believe is what Ajax, HTML5, etc are supposed to do. HoboStd is a decorative font (You wouldn't write your resume in it.. ), not sure what a near or related family of fonts would be for it, Comic Sans, Arial, sans-serif?

Might be worth the OP contacting the people who designed the site, theme or template. jacoposcarabelli.it ...which looks like an Italian, professional design company. See what they have to say about it.

Sounds like a good idea. Where is the OP, anyway?

 

[MoodyBlues]

With CSS there is a fallback font setting. It's been a while, but I think the syntax is something like:

Font-family: cutefont, notcutefont, sans-serif;

???

Yep, something like that.

 

[mikedt]

Yes, exactly.


Sounds like a good idea. Where is the OP, anyway?

Italy I guess. Because just above the site/theme developer's attribution link, there's an English/Italian button. Which gives the same site in Italian.

The interesting thing is, the site for me has always displayed consistently, whatever browser or device I'm using. Because sometimes non-Chinese sites, if they're trying to pull things from Facebook, Twitter, GoogleApis etc, will often not appear as the dev intended. We we're discussing about your Wordpress blog, and the Twitter or Facebook thing a few weeks ago.

BTW at one time many Italian designer brand websites, Armani, Gucci, Prada, etc. used to be notorious for assuming that everyone was using MSIE, Flash and and had gigabytes of bandwidth. Not so bad now though, not since many of us are using Linux, mobile devices, etc. Italy is always famous for style.

 

[9to5cynic]

OP (and developer) should use Google Fonts and look for a similar font to this 'HoboStd'. They don't have that exact font, but I'm sure they have something similar.

 

[mikedt]

OP (and developer) should use Google Fonts and look for a similar font to this 'HoboStd'. They don't have that exact font, but I'm sure they have something similar.

Hobo - Fonts.com

It looks like you have to buy it($20). It's definitely not a standard web-safe font that every OS and browser should have. Would probably have to do something like "Font-family: HoboStd, Arial, sans-serif;"

Here's the list of fonts, with examples, that are considered web-safe and should be consistent for CSS.
CSS Web Safe Fonts

So it's basically sans-serif, serif, monospace.....and nothing really cute or decorative.

Even Android Forums looks a little bit different, whether I view it on a Mac or a Linux Mint PC. Because the specified font for AF is Verdana, which the Mac has, but I'm sure doesn't come with Linux Mint as standard. More than likely wouldn't come with Ubuntu either, because that would only include license-free and GPL'd fonts. So it chooses another sans-serif font family member. Verdana is actually a Microsoft font.

BTW I'm a bit of a font geek and typography does interest me. I can often spot the difference between Helvetica(which is not free but comes with Mac OS) and Arial(it always comes with Windows). Android has it's own sans-serif typeface, it's called Droid Sans, and most of us should be quite familiar with that one. ...newer devices use a font family called Roboto.

Hopefully this thread has maybe helped the OP, and anyone else interested in doing CSS and web-pages.

 

[peternorse]

Hai;
Just go into style sheet and insert into the following code:
@font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); }

 

[MoodyBlues]

Hai;
Just go into style sheet and insert into the following code:
@font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); }

Hi there, petemorse. Welcome to Android Forums.

Thanks for the info about the font-face issue.