download font in css

Table of Contents

1. way 1: use google font api

Example: A google font Tangerine 

   <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

which gives you a stylesheet segement

2. way 2: use your own css, find the font somewhere

/* latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url(http://fonts.gstatic.com/s/tangerine/v17/IurY6Y5j_oScZZow4VOxCZZM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Note:

  • .otf font corresponds to format('opentype')
@font-face {
    font-family: 'CustomHeading';
    src: url('./fonts/SFAtarianSystem.ttf') format('embedded-opentype'), /* Internet Explorer */
         url('./fonts/SFAtarianSystem.ttf') format('woff2'),             /* Super Modern Browsers */
         url('./fonts/SFAtarianSystem.ttf') format('woff'),              /* Pretty Modern Browsers */
         url('./fonts/SFAtarianSystem.ttf') format('truetype'),          /* Safari, Android, iOS */
         url('./fonts/SFAtarianSystem.ttf') format('svg');               /* Legacy iOS */
}

covers all format(values)

Backlinks

Author: Linfeng He

Created: 2024-04-03 Wed 20:17