CSS fonts

CSS fonts- 5 generic font options: Serif, Sans serif, Cursive, Fantasy, and Monospace.

Choose similar fonts, use commas to separate each option, and use a generic font family as last option. Always declare generic fonts without quotes. Two or three declared fonts are standard. The website, www.cssfontstack.com is a good resource.

Web fonts are not pre-installed on user’s computer, but may be a downloaded file that is included like other files. Link to these files using the @font-face method.

In your css file you declare it like so,

@font-face {

   font-family: “Font Name”;

   src: url(font-name.ttf);


then use it like any other font-family,

body {

   font-family: “Font Name”, Arial, sans-serif;


Modern browsers support the WOFF and WOFF2 file formats.

CSS Tricks website has information on @font-face for older browsers. The website, www.fontsquirrel.com generates free fonts to download.

You can use external font sources that are hosted online, such as Adobe Typekit or Google fonts. No need to download files. Google fonts are free.

According to www.css-tricks.com, to use a web font that is hosted on Google’s server declare,

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

then use it like before,

body {

   font-family: “Open Sans”, Arial, sans-serif;


You can also use a link to the URL and then place that link inside the head before the main css file.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s