Changing the font

The font of your site is the single most important feature that gives your site readability as well as individuality. With the universal support of web fonts, a range of font styles appropriate to your content is available through platforms such as Google Fonts or Adobe Typekit. Google Fonts are available at no charge and have many excellent choices. When selecting a font, aim for legibility and appropriateness. A poorly chosen font can make your site hard to use.

The DLC Theme comes with the following Google fonts for each swatch:

  1. Red and Gray, and Slate: Google font Source Sans Pro (sans serif)
  2. Blue and Green: Google font Alegreya (serif)
  3. None: no font specified; your browser supplies its own default font, most commonly Times Roman

To change the font of your DLC theme using a Google web font:

  1. Apply a CSS style to the #page div in your main style sheet through CSS Injector:
    1. Configure > CSS Injector > select your existing "CSS core" style sheet.
    2. Add the following rule:
      #page {
          font-family: 'name-of-your-font', serif/sans-serif;  /* This information is supplied by Google */
          font-size: 1em;  /* You may need to adjust the default 1em size depending on your font’s x-height. */
          line-height: 1.6em;  /* You may need to adjust the line height depending on your font’s x-height. */
      }
    3. Scroll to the bottom and save.
       
  2. The easiest method is to use the "@font-face" protocol. Google no longer supports the older javascript protocol for its fonts.
    1. If using a Google font, navigate to the Google page that supplies the html link to the font information. It will look something like <link href="https://fonts.googleapis.com/css?family=NameOfFont:400,400i,700" rel="stylesheet">
    2. Copy and paste this link into your browser and load the code. It will look something like
      @font-face {
        font-family: 'NameOfFont';
        font-style: normal;
        font-weight: 400;
      etc....
    3. Copy the entire set of @font-face code and paste it into a new CSS injector style sheet called "fonts" or something that is meaningful to you.
    4. Save.
       
  3. See http://www.google.com/fonts for this information.
     
  4. To change the font only on one specific element, apply the font CSS to only the div names you wish to use the new font.