46

I would like to use Calibri for my website.

I would like to use the Calibri font for my website even when the visitor does not have the font installed (ie. non Windows Vista/7 visitors).

Does Microsoft allow embedding of the Calibri font into a Web Site?

If so, what technology do they allow this? EOT?

Thanks.

Improve this question
2
  • 2
    www.cssfontstack.com suggests a usage like this: font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    – SunnyRed
    Feb 26, 2014 at 15:59
  • I think this may be off-topic because it is about legal font usage.
    – Flexo ♦
    Jan 16, 2015 at 22:28

3 Answers 3

Reset to default
48

Somehow, Google has Calibri and Cambria in their directory. You might be able to use it through their link:

Calibri → https://fonts.googleapis.com/css?family=Calibri:400,700,400italic,700italic

Cambria → https://fonts.googleapis.com/css?family=Cambria:400,700,400italic,700italic

Improve this answer
9
  • 3
    I get 403 forbidden :( Has the link be Changed?
    – Christian Gollhardt
    Jan 15, 2015 at 10:38
  • 1
    For whatever reason, just fonts.googleapis.com/… works, even though the catalog link sends people to fonts.com
    – lkraav
    Apr 29, 2015 at 16:48
  • 2
    Why isn't this the accepted answer?! It's perfect, and significantly more reliable/cross platform than the other answer :-/
    – hobailey
    Sep 28, 2015 at 7:32
  • 1
    To anyone who is experiencing a 403 when viewing the above links, try the same url with https instead of http and they should work.
    – JxM
    Sep 12, 2016 at 12:43
  • 1
    @hobailey: Adding a font through a non-published link without license information? Sounds like a recipe for getting sued to me...
    – Heinzi
    Dec 5, 2017 at 16:29
26

You might want to check this discussion at http://www.mobileread.com/forums/showthread.php?t=63055

I would just put Calibri in the CSS followed by the fonts that match Calibri the closest. For example:

font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

Your website will then take the best available font.

Depending on the type of visitors your website is meant for most visitors should have Windows Vista or Windows 7 and thus have the Calibri font available for viewing your website.

Improve this answer
3
  • 3
    Thanks for the pointer. The problem with listing Calibri first is that it is smaller than Verdana or Arial. Visitors without Calibri see very large (ugly) text. I am going to try serving the free Droid font to those who do not have Calibri. I saw that font from the link you provided so thank you for the tip.
    – Jamie
    Mar 27, 2010 at 17:09
  • Try it this way (w3schools.com/css/tryit.asp?filename=trycss_font-size_px), it says that IE isn't supported but that might refer to IE 6 and earlier versions. Works fine in IE 7 and later as far as I can see.
    – Tamara Wijsman
    Mar 28, 2010 at 3:58
  • I'd just use Calibri with a different fallback font. Verdana is notoriously chunky, far too big for its point size, which makes it a bad choice to mix with others in a fallback chain.
    – bobince
    Sep 15, 2010 at 22:32
9

Calibri is available as a web font from several provider:

http://www.fonts.com/font/microsoft-corporation/calibri?QueryFontType=Web#buying-options

Improve this answer
2
  • 2
    That's not free, it costs at least 49€
    – dialex
    Jun 20, 2017 at 10:44
  • 1
    That's the legal way OP is looking for
    – Hussam
    Dec 7, 2020 at 14:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.