1. Download our Official Android App: Forums for Android!

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

Discussion in 'Computers' started by fafabone, Aug 1, 2013.

  1. fafabone

    fafabone Lurker
    Thread Starter
    Rank:
    None
    Points:
    5
    Posts:
    1
    Joined:
    Aug 1, 2013

    Aug 1, 2013
    1
    0
    5
    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!
     

    Advertisement

  2. MoodyBlues

    MoodyBlues Compassion counts.
    VIP Member
    Rank:
     #27
    Points:
    713
    Posts:
    6,050
    Joined:
    Jan 27, 2011

    Jan 27, 2011
    6,050
    4,810
    713
    Formerly Linux sysadmin/programmer
    $HOME/LosAngeles
    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 likes this.
  3. mikedt

    mikedt 你好
    Rank:
     #5
    Points:
    3,238
    Posts:
    27,331
    Joined:
    Sep 22, 2010

    Sep 22, 2010
    27,331
    16,771
    3,238
    Teachaaa
    Jinan, China
    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.
     
  4. MoodyBlues

    MoodyBlues Compassion counts.
    VIP Member
    Rank:
     #27
    Points:
    713
    Posts:
    6,050
    Joined:
    Jan 27, 2011

    Jan 27, 2011
    6,050
    4,810
    713
    Formerly Linux sysadmin/programmer
    $HOME/LosAngeles
    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 likes this.
  5. mikedt

    mikedt 你好
    Rank:
     #5
    Points:
    3,238
    Posts:
    27,331
    Joined:
    Sep 22, 2010

    Sep 22, 2010
    27,331
    16,771
    3,238
    Teachaaa
    Jinan, China
    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?
     
  6. MoodyBlues

    MoodyBlues Compassion counts.
    VIP Member
    Rank:
     #27
    Points:
    713
    Posts:
    6,050
    Joined:
    Jan 27, 2011

    Jan 27, 2011
    6,050
    4,810
    713
    Formerly Linux sysadmin/programmer
    $HOME/LosAngeles
    I don't know. :thinking: 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.

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

    I don't know. Maybe it is.
     
    mikedt likes this.
  7. mikedt

    mikedt 你好
    Rank:
     #5
    Points:
    3,238
    Posts:
    27,331
    Joined:
    Sep 22, 2010

    Sep 22, 2010
    27,331
    16,771
    3,238
    Teachaaa
    Jinan, China
    Here's some screen-shots from my phone, three different browsers, Opera, Naked Browser and the default one.

    Screenshot_2013-08-03-04-40-02.jpg Screenshot_2013-08-03-04-34-41.jpg Screenshot_2013-08-03-04-32-07.jpg

    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.
     
  8. MoodyBlues

    MoodyBlues Compassion counts.
    VIP Member
    Rank:
     #27
    Points:
    713
    Posts:
    6,050
    Joined:
    Jan 27, 2011

    Jan 27, 2011
    6,050
    4,810
    713
    Formerly Linux sysadmin/programmer
    $HOME/LosAngeles
    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.
     
    mikedt likes this.
  9. 9to5cynic

    9to5cynic Android Expert
    Rank:
    None
    Points:
    633
    Posts:
    4,872
    Joined:
    Feb 20, 2011

    Feb 20, 2011
    4,872
    1,767
    633
    /home/
    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 likes this.
  10. mikedt

    mikedt 你好
    Rank:
     #5
    Points:
    3,238
    Posts:
    27,331
    Joined:
    Sep 22, 2010

    Sep 22, 2010
    27,331
    16,771
    3,238
    Teachaaa
    Jinan, China
    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.
     
  11. MoodyBlues

    MoodyBlues Compassion counts.
    VIP Member
    Rank:
     #27
    Points:
    713
    Posts:
    6,050
    Joined:
    Jan 27, 2011

    Jan 27, 2011
    6,050
    4,810
    713
    Formerly Linux sysadmin/programmer
    $HOME/LosAngeles
    Yes, exactly.

    Sounds like a good idea. Where is the OP, anyway? :thinking:
     
  12. MoodyBlues

    MoodyBlues Compassion counts.
    VIP Member
    Rank:
     #27
    Points:
    713
    Posts:
    6,050
    Joined:
    Jan 27, 2011

    Jan 27, 2011
    6,050
    4,810
    713
    Formerly Linux sysadmin/programmer
    $HOME/LosAngeles
    Yep, something like that.
     
  13. mikedt

    mikedt 你好
    Rank:
     #5
    Points:
    3,238
    Posts:
    27,331
    Joined:
    Sep 22, 2010

    Sep 22, 2010
    27,331
    16,771
    3,238
    Teachaaa
    Jinan, China

    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. :D Italy is always famous for style. :p
     
  14. 9to5cynic

    9to5cynic Android Expert
    Rank:
    None
    Points:
    633
    Posts:
    4,872
    Joined:
    Feb 20, 2011

    Feb 20, 2011
    4,872
    1,767
    633
    /home/
    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.
     
  15. mikedt

    mikedt 你好
    Rank:
     #5
    Points:
    3,238
    Posts:
    27,331
    Joined:
    Sep 22, 2010

    Sep 22, 2010
    27,331
    16,771
    3,238
    Teachaaa
    Jinan, China

    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. :D ...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. :)



     
    MoodyBlues likes this.
  16. peternorse

    peternorse Lurker
    Rank:
    None
    Points:
    5
    Posts:
    1
    Joined:
    Aug 10, 2013

    Aug 10, 2013
    1
    0
    5
    Male
    Own Business
    USA
    Hai;
    Just go into style sheet and insert into the following code:
    @font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); }
     
  17. MoodyBlues

    MoodyBlues Compassion counts.
    VIP Member
    Rank:
     #27
    Points:
    713
    Posts:
    6,050
    Joined:
    Jan 27, 2011

    Jan 27, 2011
    6,050
    4,810
    713
    Formerly Linux sysadmin/programmer
    $HOME/LosAngeles
    Hi there, petemorse. Welcome to Android Forums. :)

    Thanks for the info about the font-face issue.
     

Share This Page

Loading...