CODEWITHSUNDEEP
cssinternet-explorer
Sofia Malmsten
Sofia Malmsten

Reputation: 87

How to implement specific font style in Explorer?

I have defined my styles in a CSS style sheet, and everything looks as expected in Chrome and Safari. But I loose the styles when I open my project in Internet Explorer. I tried to define the style directly in the HTML document but it still doesn't work. Do I need to implement some IE specific style definition? Or any other ideas how I can solve this? Here is the css for my "submenu-btn": 

.submenu-btn {
  padding-left: 25px;
  font-family: avenir;
  width: 100%;
  height: 35px;
  background-color: #f2f2f2;
  border : none;
  border-bottom: solid 0.5px lightgray;
  transition: all ease 0.5s;
  border-radius: 0px;
  bottom: 5px;
  position: static;
  text-align: left;
}

Upvotes: 1

Views: 322

Answers (1)

SuperDJ
SuperDJ

Reputation: 7661

One of the easiest ways of adding a font to a stylesheet is by using Google Fonts. By using Google fonts you will give all users the same experience no matter the browser.

A browser can only use fonts that are locally available. So when you are using a font that is only installed on your machine a other user will not see that font unless installed. By using Google Fonts neither you or a other user will have to install the font.

This makes Google Fonts less error prone than defining a font by @font-face which has some quirks. For instance not every font file extensions is supported by all browsers as can be seen here and here. But you also need to define the font-weight and font-style for all rules.

For using Google Fonts there are 2 options. The first is by HTML. Add the following HTML in the head tag:

<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

The second option would be to import it directly into the stylesheet. Add the following CSS somewhere (preferably on top) in your CSS file:

@import url('https://fonts.googleapis.com/css?family=Nunito');

That way you don't need to import it with HTML.

In both cases you still need to add the following line to apply the font-family to a element:

font-family: 'Nunito', sans-serif;

The font Nunito is quite close to the look of Avenir which is stated in the question.

Upvotes: 1

Related Questions