Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › fonts for IE9

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 21, 2015 at 8:01 pm #204045
    chauhanheena
    Participant

    Hi,

    Im using the current code in my css file.

    @font-face {
    font-family: 'Helvetica Neue';
    src: url('font/HelveticaNeue_Lt.ttf');
    font-weight: normal;
    font-style: normal;
}

    But Helvetica does not display properly in IE9and below.

    Im not using a different css file for IE9. Is it possible to change/add some code in the same css file so that for IE9 and below i can display myriad-web-pro.ttf instead of helveticaNeue

    thanks

    June 25, 2015 at 1:16 am #204141
    chauhanheena
    Participant

    @senff

    This is the new code that i have added. Helvetica still does not show upon IE9. Infact no text displays.

    Is there i way i can display simple arial if the browser is IE9.

    June 25, 2015 at 1:24 am #204142
    Shikkediel
    Participant

    I believe so, you can write it in the CSS like this :

    #element {
font-family: 'Helvetica Neue', Arial;
}

    If that doesn’t get the desired result, another option would be to write a conditional statement.

    June 25, 2015 at 5:29 am #204166
    chauhanheena
    Participant

    @font-face {
    font-family: ‘Helvetica Neue’;
    src: url(‘font/Helvetica/HelveticaNeue_Lt.ttf’); /* IE9 Compat Modes /
    src: url(‘font/Helvetica/HelveticaNeue_Lt.eot?#iefix’) format(’embedded-opentype’), /     IE6-IE8 /
    url(‘font/Helvetica/HelveticaNeue_Lt.woff’) format(‘woff’), /     Pretty Modern Browsers /
    url(‘font/Helvetica/HelveticaNeue_Lt.eot’) format(‘truetype’), /     Safari, Android, iOS /
    url(‘font/Helvetica/HelveticaNeue_Lt.svg#svgFontName’) format(‘svg’); /     Legacy iOS */
    font-weight: normal;
    font-style: normal;
    }

    but still doesnt work

    June 25, 2015 at 6:28 am #204169
    chauhanheena
    Participant

    there was some error in my pasting the code. The astrieks are present and my code, looks exactly like urs. but it still doesnt work. I also have the font files int he right folder. Apparently theres in some problem in IE displaying fonts of Type1.

    Heres the link.
    http://bobbyjoneswebdesign.blogspot.com/2011/12/internet-explorer-9-type-1-font-bug.html

    June 25, 2015 at 6:54 am #204170
    chauhanheena
    Participant

    i also tried the following

    Created a new css for IE-9

    added the following code in the html file

    <!DOCTYPE html>
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]>
    <html lang="en" class="ie9">
    <link rel="stylesheet" type="text/css" href="css/style-ie9.css" />
    <link rel="stylesheet" type="text/css" href="css/header1-ie9.css" />
<![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en"><!--<![endif]-->
<head>
<title>abc</title>
<!--Meta-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--CSS Global Compulsory-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/header1.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/style_responsive.css">
<link rel="shortcut icon" href="images/favicon.ico">

    the normal css file has the following code

    @font-face {
  font-family: 'Helvetica Neue';
  src: url('font/Helvetica/HelveticaNeue_Lt.ttf'); /* IE9 Compat Modes */
  src: url('font/Helvetica/HelveticaNeue_Lt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/Helvetica/HelveticaNeue_Lt.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/Helvetica/HelveticaNeue_Lt.eot')  format('truetype'), /* Safari, Android, iOS */
       url('font/Helvetica/HelveticaNeue_Lt.svg#svgFontName') format('svg'); /* Legacy iOS */
           font-weight: normal;
    font-style: normal;
}


    font-family:'Helvetica Neue',sans-serif;

    the ie css file does not have any helvetica font code. Instead the elements on the file have the following:

        font-family: Arial,sans-serif;

    Should this work properly.

    June 25, 2015 at 3:52 pm #204204
    Shikkediel
    Participant

    Not sure what’s going on exactly (have the other font formats been added to the directory for example?) but the IE specific stylesheet would have to be placed after the general one or it’ll be overruled.

    A .woff font should work fine in IE9 by the way…

    http://caniuse.com/woff

    Personally, I leave it like that (a woff file only) and use a web safe fallback for the rest.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.