CSS - Include multiple fonts in one CSS file

Question

How can I add more that one font in a CSS file? I have tried the following but it doesn't seem to work.

@font-face {
    font-family: 'Inspira_Reg';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Bold';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Italic';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Medium';
    src: url('http://myfonturl.com');
}

And then to use the font, I simply set the font-family property in the CSS IDs like so:

#titleSection {
   margin: 25px 5px auto auto;
   font-size: 11px;
   text-align:left;
   font-family: 'Inspira_Reg';
   color: black;
}

But it doesn't seem to work. The font doesn't seem to get recognized, it just seems to use Arial or whatever the default is.

I am using the latest version of Google Chrome and the font types I am using are TTF files.

Thanks, Dan.

Yeah stupid question, like the guy above, are those URL's really correct or are you changing them for demo purposes? — Joe Corby
– Joe Corby, Commented Apr 22, 2015 at 8:23
It's important we know the URL you're loading your fonts from because the issue could just be a simple extension issue or it could be something more. — user4392178
– user4392178, Commented Apr 22, 2015 at 8:23
open console , network tab , and check if the font is loaded — WhiteLine
– WhiteLine, Commented Apr 22, 2015 at 8:23
@JoeCorby I have changed the URLs for demo purposes. The real URLs that I am using ARE working, I have tested them. — user4657588
– user4657588, Commented Apr 22, 2015 at 8:28

jbutler483 · Accepted Answer · 2015-04-22 08:33:47Z

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

For cross browser compatibility, It seems that font-face requires multiple definitions. For example, this is from a CSS-tricks article:

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

An alternative to using this would be to use an import (which would need to be placed at the start of your css file)

Something like:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

which could then be used via:

font-family: 'Open Sans', sans-serif;

This could be used for multiple fonts, by importing them at the top of your CSS, and using the font-family declaration.

For many different fonts, and more information on using them, you could have a look here on google fonts

hadi · Accepted Answer · 2015-04-22 08:36:34Z

0

well every thing looks good except for the font url. you should give the local address of your font. let me give you an full example buddy:

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>
</html>

so place your font the html folder and use the code :)

answered Apr 22, 2015 at 8:36

hadi

1,1218 silver badges23 bronze badges

4 Comments

user4657588 Over a year ago

Thanks very much for your help and example code. Its working now :)

user4657588 Over a year ago

Oh you did help, very much so sir. I will be upvoting all your answers and questions over the next few days as a thank you :)

user4657588 Over a year ago

I was refering back to your answer for a friend who was having the same problem. Anyway, I just noticed your Iranian!! Salam, haleh shomah? :)

hadi Over a year ago

@Dan Yes i am :) mer30 aziz. movafagh bashi :)

Collectives™ on Stack Overflow

CSS - Include multiple fonts in one CSS file

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related