How to Use Specific Fonts on a Website
Oct 16, 2022
When trying to format my website with ASCII art (see my e-mail address at the bottom of the page for an example) I surprisingly found out that Android did not support monospace font, so I found a workaround to enforce font uniformity on my website:
Find a Font to Use
Liberation Fonts is an open-source font collection that provides Sans, Serif and monospace fonts to use. We can download the released fonts and put them in our website folder.
Configure @font-face in CCS
We need to specify these fonts in our CSS file so that the browser will fetch them:
@font-face {
font-family: 'LiberationMono';
src: url('/liberation-fonts-ttf-2.1.5/LiberationMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'LiberationMono';
src: url('/liberation-fonts-ttf-2.1.5/LiberationMono-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'LiberationMono';
src: url('/liberation-fonts-ttf-2.1.5/LiberationMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'LiberationMono';
src: url('/liberation-fonts-ttf-2.1.5/LiberationMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LiberationSans';
src: url('/liberation-fonts-ttf-2.1.5/LiberationSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'LiberationSans';
src: url('/liberation-fonts-ttf-2.1.5/LiberationSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'LiberationSans';
src: url('/liberation-fonts-ttf-2.1.5/LiberationSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'LiberationSans';
src: url('/liberation-fonts-ttf-2.1.5/LiberationSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LiberationSerif';
src: url('/liberation-fonts-ttf-2.1.5/LiberationSerif-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'LiberationSerif';
src: url('/liberation-fonts-ttf-2.1.5/LiberationSerif-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'LiberationSerif';
src: url('/liberation-fonts-ttf-2.1.5/LiberationSerif-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'LiberationSerif';
src: url('/liberation-fonts-ttf-2.1.5/LiberationSerif-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Set font-family in CCS
Now we need to set the font-family attributes in CCS so that the browser actually uses the fonts to display our content:
html {
font-family: LiberationSerif, serif;
}
code {
font-family: LiberationMono, monospace;
}