1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

"Roboto" font looks ugly in Firefox and Safari

Discussion in 'HTML & Website Design' started by Mr.Dog, Apr 6, 2015.

  1. #1
    Hi,

    I recently installed the font kit for "roboto" on one of my sites and it looks darn ugly on Firefox and Safari.

    I use various types of roboto: the regular version and the condensed light italic version.

    I took the roboto font kit from FontSquirrel:
    http://www.fontsquirrel.com/fonts/roboto

    Works perfectly in Chrome and Internet Explorer, but especially the condensed light italic looks very ugly in Firefox and Chrome.

    Any ideas on what the problem is? And how it can be solved?
    SEMrush
    On the FontSquirrel site it looks perfect in all browsers. If they can do it on their site, how come their font kit-generated fonts don't render for me?
     
    Mr.Dog, Apr 6, 2015 IP
    SEMrush
  2. Xhoz

    Xhoz Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    1 - Go to FontSquirrel Roboto font page and click the webfont kit tab. Download the “@font-face kit”.
    2 - 2. Extract the zipped file to your website font folder. Open your web stylesheet and add the following code:
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Regular-webfont.eot');
        src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-Regular-webfont.woff') format('woff'),
             url('Roboto-Regular-webfont.ttf') format('truetype'),
             url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Italic-webfont.eot');
        src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-Italic-webfont.woff') format('woff'),
             url('Roboto-Italic-webfont.ttf') format('truetype'),
             url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
        font-weight: normal;
        font-style: italic;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Bold-webfont.eot');
        src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-Bold-webfont.woff') format('woff'),
             url('Roboto-Bold-webfont.ttf') format('truetype'),
             url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
        font-weight: bold;
        font-style: normal;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-BoldItalic-webfont.eot');
        src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-BoldItalic-webfont.woff') format('woff'),
             url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
             url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
        font-weight: bold;
        font-style: italic;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Thin-webfont.eot');
        src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-Thin-webfont.woff') format('woff'),
             url('Roboto-Thin-webfont.ttf') format('truetype'),
             url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
        font-weight: 200;
        font-style: normal;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-ThinItalic-webfont.eot');
        src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-ThinItalic-webfont.woff') format('woff'),
             url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
             url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
        font-weight: 200;
        font-style: italic;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Light-webfont.eot');
        src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-Light-webfont.woff') format('woff'),
             url('Roboto-Light-webfont.ttf') format('truetype'),
             url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
        font-weight: 100;
        font-style: normal;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-LightItalic-webfont.eot');
        src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-LightItalic-webfont.woff') format('woff'),
             url('Roboto-LightItalic-webfont.ttf') format('truetype'),
             url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
        font-weight: 100;
        font-style: italic;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-Medium-webfont.eot');
        src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-Medium-webfont.woff') format('woff'),
             url('Roboto-Medium-webfont.ttf') format('truetype'),
             url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
        font-weight: 300;
        font-style: normal;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('Roboto-MediumItalic-webfont.eot');
        src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
             url('Roboto-MediumItalic-webfont.woff') format('woff'),
             url('Roboto-MediumItalic-webfont.ttf') format('truetype'),
             url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
        font-weight: 300;
        font-style: italic;
    }
    Code (CSS):
    3- Make sure you change the “src” to point to the path of the font folder.
    Next, you can use the syntax
    font-family:"Roboto";
    Code (CSS):
    to display the Roboto font on your web page.

    That’s it. Enjoy!
     
    Xhoz, Apr 12, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,646
    Likes Received:
    1,976
    Best Answers:
    250
    Trophy Points:
    515
    #3
    Which @Xhoz just showed why I avoid webfonts for all but the smallest of corner case scenarios, most often NEVER using them for flow text or anything smaller than 1.5REM. I don't even want to think about how big a waste of bandwidth that would be since fonts alone with that many embeds would be four times bigger in size and filecounts that I usually allocate for HTML+CSS+SCRIPTS.

    Particularly on a font that makes me ask "and you aren't using Arial or Segoe UI WHY exactly?!?" since to my eyes that just looks like another generic sans-serif font that someone has increased the letter-spacing on... in which case go "font-family:"segoe ui",arial,helvetica,sans-serif; letter-spacing:1px;"
     
    deathshadow, Apr 13, 2015 IP