In this article I will explain how to define a new font-family
using @font-face
and WOFF type fonts, which are supported by nearly every web browser.
Upload the font files
Since we’re using non-standard fonts they need to be hosted on a web server, that way not just visitors with the fonts already installed can render the text correctly. Failing to make the fonts available online would result in the majority of visitors seeing one of the fallback fonts, which is less than ideal. By hosting the fonts ourselves we’re ensuring a consistent user experience for each and every visitor.
The CSS
Defining a custom font-family
Now that the font files have been uploaded we can define a custom font-family
using @font-face
in our css. The following css goes a step further, defining a range of font weights, this is usually unnecessary.
@font-face {
font-family: Whitney;
font-weight: 300;
src: url(/wp-content/themes/vidler/fonts/Whitney-300.woff) format("woff")
}
@font-face {
font-family: Whitney;
font-weight: 400;
src: url(/wp-content/themes/vidler/fonts/Whitney-400.woff) format("woff")
}
@font-face {
font-family: Whitney;
font-weight: 500;
src: url(/wp-content/themes/vidler/fonts/Whitney-500.woff) format("woff")
}
@font-face {
font-family: Whitney;
font-weight: 600;
src: url(/wp-content/themes/vidler/fonts/Whitney-600.woff) format("woff")
}
@font-face {
font-family: Whitney;
font-weight: 700;
src: url(/wp-content/themes/vidler/fonts/Whitney-700.woff) format("woff")
}
Code language: CSS (css)
Using a custom font-family
Now that we have defined our font-family
, we can use it in precisely the same way as any other font-family
.
body,
button,
input,
select,
textarea {
font-family: "Whitney", Georgia, serif;
}
Code language: CSS (css)
Additional Information
Before jumping in and setting up your own font-family
it’s worth checking if Google Fonts has what you need. Google Fonts lets you browse through 900+ fonts and to build custom sets that can be added to your website with a single line of html.