CODEWITHSUNDEEP
phpcsswordpressinternet-explorerfonts
Adrian
Adrian

Reputation: 3062

How to set font face for internet explorer in WordPress?

I am setting up a font face for internet explorer only in WordPress

All of the fonts are located inside the root directory of child theme.

This is the code in ie-only.css

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

    @font-face {
    font-family: 'open_sansregular';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff2') format('woff2'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

    }


    .text-highlight { border: 1px solid red; font-family:open_sansregular;  }

}

Do you know what is the proper address to locate the font family in the root directory of the child theme?

Any help is appreciated. Thanks

Upvotes: 1

Views: 420

Answers (2)

Chirag S Modi
Chirag S Modi

Reputation: 419

I think you have not set font path correnctly try this code.

@font-face {
font-family: 'open_sansregular';
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.eot');
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.woff2') format('woff2'),
     url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.woff') format('woff'),
     url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.ttf') format('truetype'),
     url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;

}

Upvotes: 1

Adrian
Adrian

Reputation: 3062

I was able to solve my issue.

To enable font face in Internet explorer, create a separate css for IE. Example: 

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/ie-only.css" />

get_stylesheet_directory_uri() will get the directory of the child theme

Now in the ie-only.css

    @font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

    }

All of the font files declared above should be available within the directory your are working with.

Thanks.

Upvotes: 0

Related Questions