Small Victories
160601 custom fonts tip

Ideas

Add Custom Fonts

Custom Fonts are Easy!

Implementing custom fonts will depend on whether you’re self-hosting or using a service.

Self Hosted

For self-hosting, you can put the fonts in your site folder and reference them in your _sv_custom.css file as you would normally.

For example, if you put your fonts in a folder called /assets you could just declare your @font-face like so:

@font-face {
    font-family: 'Capital Semi Bold';
    src: url('assets/Capital-SemiBold-Web.woff') format('woff'),
         url('assets/Capital-SemiBold-Web.woff2') format('woff2'),
         url('assets/Capital-SemiBold-Web.ttf') format('truetype');
    font-weight: regular;       
}

Adding Google fonts

Maybe you found something good on Google Fonts, what a find! Here is how you add those in:

Find your font and click quick use and you will get a stylesheet link in the “@import” tab. Copy and paste it into _sv_custom.css.

It should look like this:

@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300);

Then, you can use your font on any element you want. For example:

body {
  font-family: ‘Work Sans’, sans-serif;
}

Adding Typekit

Set up your kit and then click “embed code” in the top right corner.

You should get a modal with a code snippet that looks like this:

!function($) {
  // Write your own javascript here.

  $.getScript('//use.typekit.net/tsj2vbx.js', function() {
    //script is loaded and executed put your dependent JS here
    try{Typekit.load();}catch(e){}
    });

}(window.jQuery);

Copy that snippet into your _sv_custom.js file

Next Post

Featured Site

Block Trump