37
edits
Changes
removed one example, fixed the solution numbers
To remove Google Fonts from your website and self-host instead, you will need to upload the fonts you want to use to your server. Some services for selecting and downloading or purchasing fonts are listed below. You will then enter the CSS and HTML files of your pages and search for all references to font-face or font-family and remove them. You will then replace these references with a direct link to your self-hosted font.
Typically, when you download fonts to use for your website, you will receive a folder of several variations of the font – this allows the font to be rendered in various formats and browsers. You may receive .eot, .woff, and .ttf files. Once you upload these fonts, you can call on them in the following manner in your CSS files. For instance, if you wanted to use Open Sans and Liberation Serif on your website, you would add the following to the top of your CSS file:
<pre>@font-face {
font-style: normal;
}
You will want to make sure that all of the urls to the fonts include any directories that you may have placed the fonts in.
<h3 class="title entry solution-3">Practical Typography</h3>
<span class="link entry solution-23">https://practicaltypography.com/free-fonts.html</span><span class="entry solution-2 3 description">Practical Typography provides a small selection of open license fonts to download and self-host on your website as specified above.</span>
