52

How to write a CSS font style for the following font:

Comic Sans MS

font-family: Comic Sans MS CSS rule doesn't work.

Tiago Rangel
  • 1,159
  • 15
  • 29
  • 1
    possible duplicate of [Difference between "font-family" and font-family?](http://stackoverflow.com/questions/20709857/difference-between-font-family-and-font-family) – Unihedron Aug 05 '14 at 01:52

4 Answers4

98

The font may exist with different names, and not at all on some systems, so you need to use different variations and fallback to get the closest possible look on all systems:

font-family: "Comic Sans MS", "Comic Sans", cursive;

Be careful what you use this font for, though. Many consider it as ugly and overused, so it should not be use for something that should look professional.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
13

The httpd dæmon on OpenBSD uses the following stylesheet for all of its error messages, which presumably covers all the Comic Sans variations on non-Windows systems:

http://openbsd.su/src/usr.sbin/httpd/server_http.c#server_abort_http

810    style = "body { background-color: white; color: black; font-family: "
811        "'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; }\n"
812        "hr { border: 0; border-bottom: 1px dashed; }\n";

E.g., try this:

font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
cnst
  • 25,870
  • 6
  • 90
  • 122
8

You need to use quote marks.

font-family: "Comic Sans MS", cursive, sans-serif;

Although you really really shouldn't use comic sans. The font has massive stigma attached to it's use; it's not seen as professional at all.

evilscary
  • 2,097
  • 5
  • 23
  • 33
  • 10
    There are uses for it. I have been developing an app for wife to use in her kindergarten class and it is perfect for that. – John Jun 17 '14 at 16:01
  • 3
    "it's not seen as professional at all" might be not that wrong in most cases – the point, John is trying to make, is simply that there are cases where the "effect" of using this font is intended: Comic books, children, fake handwriting, etc. – shaedrich Dec 14 '20 at 07:59
  • 5
    as a professional, I love comic sans. – andygoestohollywood Nov 14 '21 at 13:19
1

Use quotes to surround the font:

font-family: "Comic Sans MS";

That should solve the problem.

UserName Name
  • 267
  • 2
  • 3