Oxford Framework

The Oxford Framework provides a list of fonts to choose from for body text and for headings. For the most part these are common fonts that are available in browsers. However, you can also install custom fonts.

For example, I like the fontin font and that's what's used on this site. I simply install it in the theme's css folder and then select it when I choose fonts for the site.

We'll assume you know how to acquire a font and prepare it for your website. What is essential here is to have a file called 'fonts.css' in a 'fonts' folder in the theme's css folder to identify your custom fonts. For example: ~/oxford/assets/css/fonts/fonts.css.

Add as many fonts as you want using the css @font-face { ... } specification. For this site I put the actual fonts in a folder called 'fontin' in the 'fonts' folder. I'm using three variations of the fontin fonts. They are called fontin, fontin-sans and fontin-smallcaps. So my fonts.css file contains a @font-face specification for each. Here is the default 'fontin' font:

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

If I wanted to added additional custom fonts, for example 'Delicious', I would add a @font-face declaration and create a folder called 'delicious' to hold the actual fonts.

What is important here is that you do the setup by identifying your fonts in ~assets/css/fonts/fonts.css and the Oxford Framework will take care of making your custom fonts available when you want to select a font and it will take care of downloading the font when someone visits your site.

Have a great font journey!