How to install custom web fonts on your website

Tags: , , , &

how-to-install-custom-web-fonts-on-your-website-by-zing-design

Once you have chosen a font for your website or app, implementing it into your project can be a little overwhelming. There are many available techniques for embedding fonts, and it’s a challenge working out which is the most appropriate and what is best practice.. In this post we’ll take you over the different ways to add your chosen fonts to your site, and show you some other techniques that will make things easier.

Google Fonts

Google fonts is an ever growing library for web fonts. with over 650 to choose from, you should be able to find the fonts that suit your needs. The filter and comparison tools make browsing and choosing simple and easy, and once you have found the right ones, adding them is nice and simple.

Screen Shot 2014-11-24 at 2.27.27 pm

Variations

Once you have chosen your fonts and clicked on ‘use’, it’s really important to take the following into consideration:

  • What weights or styles will you need for your project?
  • Will you need special characters or a particular language?
  • How long will the page take to load with the above options in place?

Adding too many variations will increase the time it takes to load the page, so make sure you only take what you need.

Installation is straightforward. Once you have chosen all the fonts, a link will be generated which you add to the head of your document.

Screen Shot 2014-11-24 at 2.31.07 pm

Once that is done, simply call the fonts in your CSS, this line of code will also be generated by Google Fonts for you, and then you are good to go

Screen Shot 2014-11-24 at 2.31.17 pm

For a more in depth article on Google Fonts, click here

Using CSS3 @font-face

If for some reason you can’t quite find what you are looking for from Google Fonts, there are other websites out there that do offer more unique fonts. One that is particularly popular is Font Squirrel. With this site you do need to download the fonts and their variations and then add them manually into your css.

Download

Once you have picked your desired font, download the font with all the font types required for your project.

Screen Shot 2014-11-24 at 2.35.52 pm

Add to Directory

If there is not a dedicated font folder within your site directory, create one at the root of your site and add your font within it, naming it appropriately. Unzip the file that you downloaded and add the files to this folder

Include the files

Once the files have been added to your site, we will need to add them to your project. Some places like Font Squirrel will have a stylesheet file in which you can copy and paste the code into your css. Here is the  cross-browser compatible syntax for adding the font:

CSS

@font-face {
    font-family: 'caviar_dreamsregular';
    src: url('CaviarDreams-webfont.eot');
    src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams-webfont.woff') format('woff'),
         url('CaviarDreams-webfont.ttf') format('truetype'),
         url('CaviarDreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

This is effectively calling all the of the different file types depending on the browser will use to render the font.

You will need to add this block of code and modify it for every weight and style which is either included or that you want to have included in your site and modify it slightly for the variations:

@font-face {
    font-family: 'caviar_dreamsitalic';
    src: url('CaviarDreams_Italic-webfont.eot');
    src: url('CaviarDreams_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams_Italic-webfont.woff') format('woff'),
         url('CaviarDreams_Italic-webfont.ttf') format('truetype'),
         url('CaviarDreams_Italic-webfont.svg#caviar_dreamsitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'caviar_dreamsbold';
    src: url('Caviar_Dreams_Bold-webfont.eot');
    src: url('Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Caviar_Dreams_Bold-webfont.woff') format('woff'),
         url('Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
         url('Caviar_Dreams_Bold-webfont.svg#caviar_dreamsbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Compass

If you are using Compass, you’ll want to integrate your font-face with your other stylesheets. And a handy Compass mixin makes adding a font-face just a wee bit easier.

Let’s assume we’ve already downloaded our Caviar Dreams web-font kit from Font Squirrel, and pasted the font folders inside www/fonts/caviar-dreams/

Step 1:

In your main .scss stylesheet, import Compass’ font helper:

// FILE main.scss

@import "compass/css3/font-face";

Step 2:

Create a Sass stylesheet for your fonts. E.g. www/scss/_font-faces.scss and import that after the Compass font-face helper.

Important: Make sure this is imported before any other stylesheets

// FILE main.scss

@import “font-faces”;

Step 3:

Set font directory to fonts/ – Note: this is only necessary if you are using an older version of Compass, if you are using Compass 1.0.0 or later, the default font directory is fonts/

We will also need to set relative_assets to true

# FILE: config.rb

fonts_dir = "fonts"

relative_assets = true

Step 4:

Add your font-faces using the Compass font-face mixin:

// FILE: www/scss/_font-faces.scss

$caviar-dreams-font-name: "Caviar Dreams" !global;
$caviar-dreams-folder-name: "caviar-dreams";

// Regular
@include font-face($caviar-dreams-font-name, font-files(
               "caviar-dreams/caviardreams_macroman/CaviarDreams-webfont.woff",
               "caviar-dreams/caviardreams_macroman/CaviarDreams-webfont.ttf",
               "caviar-dreams/caviardreams_macroman/CaviarDreams-webfont.svg"),
       "caviar-dreams/caviardreams_macroman/CaviarDreams-webfont.eot", 400, normal);

// Bold
@include font-face($caviar-dreams-font-name, font-files(
               "caviar-dreams/caviardreams_bold_macroman/CaviarDreams_Bold-webfont.woff",
               "caviar-dreams/caviardreams_bold_macroman/CaviarDreams_Bold-webfont.ttf",
               "caviar-dreams/caviardreams_bold_macroman/CaviarDreams_Bold-webfont.svg"),
       "caviar-dreams/caviardreams_bold_macroman/CaviarDreams_Bold-webfont.eot", 700, normal);

// Italic
@include font-face($caviar-dreams-font-name, font-files(
               "caviar-dreams/caviardreams_italic_macroman/CaviarDreams_Italic-webfont.woff",
               "caviar-dreams/caviardreams_italic_macroman/CaviarDreams_Italic-webfont.ttf",
               "caviar-dreams/caviardreams_italic_macroman/CaviarDreams_Italic-webfont.svg"),
       "caviar-dreams/caviardreams_italic_macroman/CaviarDreams_Italic-webfont.eot", 400, italic);

// Bold Italic
@include font-face($caviar-dreams-font-name, font-files(
               "caviar-dreams/caviardreams_bolditalic_macroman/CaviarDreams_BoldItalic-webfont.woff",
               "caviar-dreams/caviardreams_bolditalic_macroman/CaviarDreams_BoldItalic-webfont.ttf",
               "caviar-dreams/caviardreams_bolditalic_macroman/CaviarDreams_BoldItalic-webfont.svg"),
       "caviar-dreams/caviardreams_bolditalic_macroman/CaviarDreams_BoldItalic-webfont.eot", 700, italic);

If this seems a little verbose and repetitive, you might want to try looping:

@each $folder-name, $file-name, $weight, $style in (
               (bold, Bold, 700),
               (bolditalic, BoldItalic, 700, italic),
               (italic, Italic, 400, italic),
               (regular, false, false)) {

 @if not $weight {
   $weight: 400;
 }

 @if not $style {
   $style: normal;
 }

 @if $file-name {
   $file-name: "_#{$file-name}";
 }

 $full-folder-name: "#{$caviar-dreams-folder-name}/caviardreams_#{$folder-name}_macroman";
 $full-file-name: "#{$full-folder-name}/CaviarDreams#{$file-name}-webfont";

 @include font-face(
   $caviar-dreams-font-name,
   font-files( "#{$full-file-name}.woff",
               "#{$full-file-name}.ttf",
               "#{$full-file-name}.svg"),
   "#{$full-file-name}.eot",
   $weight,
   $style
 );
}

This may help to make future maintenance of your font-face easier, as you can quickly add/remove font weights and styles. The major limitation of this approach is the wild inconsistency in file and folder structures, and it may be simpler just to do a little bit of
<abbr title=”Find And Replace, Copy And Paste”>FARCAP</abbr>.

Step 5:

Calling your font

Once your fonts have been added, you are ready to go. We use a mixin called get-font-family, which returns the font-family property set to our specified font, the font-weight, font-style and a serif/sans-serif fallback.

Let’s create a file for all our typography shenanigans in www/scss/_typography.scss – this can be imported anywhere in your main stylesheet after _font-faces.scss

// FILE: www/scss/_mixins.scss
// Retrieve font family
$sans-serif-fallback: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$serif-fallback: Georgia, sans-serif !default;
$sans-serif-default: true !default;

@mixin get-font-family($font-name, $font-weight:false, $sans-serif:$sans-serif-default, $font-style:false ) {
 $fallback: $sans-serif-fallback;

 @if not $sans-serif {
   $fallback: $serif-fallback;
 }

 font-family: $font-name, $fallback;

 @if $font-weight {
   font-weight: $font-weight;
 }

 @if $font-style {
   font-style: $font-style;
 }
}

Now to apply our custom font-face to some HTML elements

// FILE: www/scss/_typography.scss
// Example implementation
$heading-font: $caviar-dreams-font-name !default;

h1, h2, h3 {
 @include get-font-family($heading-font, $sans-serif:false);
}

// Which generates:
// h1, h2, h3 {
//   font-family: “Caviar Dreams”, Georgia, sans-serif;
// }

// And we want the minor-headings to be italic for some reason

h4, h5, h6 {
 // Here we set the font-weight and font-style manually
 @include get-font-family($heading-font, 400, false, italic);
}

// Which generates: 
// h4, h5, h6 {
//   font-family: “Caviar Dreams”, Georgia, sans-serif;
//   font-weight: 600;
//   font-style: italic;
// }

People who have viewed this post also viewed

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text