Fonts

Adding fonts

You can add fonts to any website using the following CSS.

You can rename the font file to anything you like and you can use any name for the the font-family declaration.

To add a bold or italic version use the same name for the font-family but add font-weight: bold and/or font-style: italic to the @font-face declartion.

@font-face {
    font-family: renner;
    src: url('renner_400.otf');
}
@font-face {
    font-family: renner;
    src: url('renner_700.otf');
    font-weight: bold;
}
@font-face {
    font-family: renner;
    src: url('renner_400_italic.otf');
    font-style: italic;
}

You can then use the font like so:

p {
    font-family: renner, 'segoe ui', sans-serif;
}

The bold version will be automatically selected for anywhere that bold is usually used: in <b>, <strong> and header tags.

It’s still useful to use fallbacks in case your font does not download or for those with slow connections.

Using @import

When using fonts from external sources, such as Google fonts, you can use @import like so:

@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono');

It’s generally better for production sites to use a <link> tag in the head of the page though.