Font-family editing in Bootstrap

Question

I was looking at a website earlier today and they had a really cool font. I looked at their code and this is what it was:

font-family: "Museo300Regular", Helvetica, Arial, sans-serif;

I tried that for a site I'm building but it did nothing... Why won't the font change take effect on my site. Also why is "Museo300Regular" in quotes and the rest isn't?

The site is done with Bootstrap and so is mine so not sure why it's not working.

EDIT:::::::::::

Okay so I have to download it apparently, but how do I get it to be accessible by my bootstrap sass stylesheets?

http://www.abstractfonts.com/font/14890 – l2aelba Apr 19 '14 at 12:35 — l2aelba, Apr 19 '14 at 12:35
This is particular to Bootstrap – user3408293 Apr 19 '14 at 12:50 — user3408293, Apr 19 '14 at 12:50
@user3408293 And Bootstrap is just CSS. – cimmanon Apr 19 '14 at 13:14 — cimmanon, Apr 19 '14 at 13:14
I'm a Newb forgive my ignorance.. – user3408293 Apr 19 '14 at 13:21 — user3408293, Apr 19 '14 at 13:21
Still haven't figured this out though... – user3408293 Apr 19 '14 at 13:22 — user3408293, Apr 19 '14 at 13:22

score 0 · Answer 1 · answered Apr 19 '14 at 12:20

The font has to be installed on the client so that the browsers can use them.

In this case, I presume that Museo300Regular is not installed in your PC

Mostly, font names that consists of more than one word is wrapped with quotes.

CSS 2.1 spec says:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

score 0 · Answer 2 · answered Apr 19 '14 at 12:32

You'll need to download the font and upload it to your server. The good news is that this specific font is free. There are a few fonts that come standard on most computers and those are listed later in the font-stack as fallback fonts. A font-stack tells the browser: load this font but if you don't have that font then load this other one and if you don't have that one just load one from the sans-serif family.

Normally you need to put quotes just around fonts with spaces or special characters in the name, but some people put it on all fonts to be consistent.

So if I don't have the font, how come I am able to see the font on their page? Can everyone see it even if they don't have it installed? If that is the case then what is the point of the backup fonts.. — user3408293, Apr 19 '14 at 12:39

score 0 · Answer 3 · answered Apr 19 '14 at 12:49

0

It's a Webfont, which means that you don't need to have it locally to view it.

Here's the same font (I think) on Adobe's Typekit-site https://typekit.com/fonts/museo

Read up on them for example here

answered Apr 19 '14 at 12:49

Pete TNT

8,293
4
36
45

Font-family editing in Bootstrap

3 Answers3