0

I've a web app built using AngularJS.

I want to set the font to 'bariol Regular' throughout my entire web app.

For it I tried following code in common css file but it didn't changed the current font or is the font getting changed but at the same time getting override with other font. I'm not understanding the exact cause.

body {
  font-family: bariol Regular;
}

I didn't download anything, didn't give any URL for the font in css, etc.,etc.

I just wrote above line of code in common css file.

Can someone please guide me in this regard please? Thanks.

Jax
  • 1,839
  • 3
  • 18
  • 30
PHPLover
  • 1
  • 51
  • 158
  • 311
  • do you have the font added to your local fonts or are you importing it? also can you post your debugger output. – Jax Apr 05 '16 at 08:23
  • @Jax:As I already said I haven't downloaded any font or anything else. Currently I'm using the default fonts. – PHPLover Apr 05 '16 at 08:26
  • 2
    if you don't have the font locally or imported how do you expect it to work so? – Jax Apr 05 '16 at 08:28
  • @Jax: I just want to apply the font bariol Regular. I can do it in whatever way I can. You just suggest me the optimum way brother. I'm a newbie. Hope you understand. – PHPLover Apr 05 '16 at 08:30
  • 2
    Possible duplicate of [How do I insert a custom font to text with CSS?](http://stackoverflow.com/questions/5922952/how-do-i-insert-a-custom-font-to-text-with-css) – Rando Hinn Apr 05 '16 at 08:30
  • Try `font-family: 'bariol Regular';` – jono Apr 05 '16 at 08:36
  • @Jonathon:Will that only be enough? Remember it's not a default font available. – PHPLover Apr 05 '16 at 08:39
  • If you have a font with that name installed locally, it should work. It's not enough to serve the font to other users without the font installed. Do do this you will need to host the font on your server. I was merely pointing out the error in your syntax. – jono Apr 05 '16 at 08:52

2 Answers2

2

Try something like this,

@font-face { font-family: bariol Regular; src: url('your_source'); }

hope it helps.

Jax
  • 1,839
  • 3
  • 18
  • 30
  • 1
    Thank for your answer but it would be better if you also add URL for bariol Regular to your answer. It would get complete. Please don't mind, take it as a suggestion from me brother. – PHPLover Apr 05 '16 at 08:35
  • 2
    download the [bariol font](http://bariol.com/) then include the url path yourself. – Jax Apr 05 '16 at 08:39
  • What if I don't download the font and only give URL for bariol Regular font in the CSS? – PHPLover Apr 05 '16 at 08:40
  • dude you have two options: 1) download the font and use it like so. 2) find a CDN and use the path to import it from there. – Jax Apr 05 '16 at 08:41
  • 2
    I want to use the second option. Can you please update your answer for it so that it would look complete and precise. I'll also accept it as an answer. It would be grateful to me actually. Could you please do me a small favour? – PHPLover Apr 05 '16 at 08:45
  • take a look at [this post](http://forums.mozillazine.org/viewtopic.php?f=25&t=2164295) on how to import from CDN. The font you want does not seem to be available on any CDN. Although you should google it! – Jax Apr 05 '16 at 08:54
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108254/discussion-between-user2839497-and-jax). – PHPLover Apr 05 '16 at 09:02
1

first of all check here for proper font-adding: How to add some non-standard font to a website?

Second inspect an element that didn't change it's font, find out what rules might override your rule and act accordingly (you can always add "!important" to your css rule and with the right selector it should change the font in all your pages)

Community
  • 1
  • 1
Velimir Tchatchevsky
  • 2,812
  • 1
  • 16
  • 21