Sometimes connecting fonts from an external server can have a number of disadvantages, including low page speeds or unavailability of the font when there are any problems with the external server.
To avoid these problems, it is best to download the font locally
Let’s get started!
- For example, download your font from Google Fonts – https://fonts.google.com
- Different browsers use different font formats, to do this, convert the downloaded font through the service https://www.font2web.com or https://transfonter.org
- Upload the converted fonts to your server in the fonts folder
- Use the code below. Paste it into the your style.css file and replace it with the appropriate fields for your font
@font-face {
font-family: 'Front Name';
font-display: swap;
src: url("../fonts/font-name.eot");
src: local("O"), url("../fonts/font-name.woff") format("woff"),
url("../fonts/font-name.ttf") format("truetype"),
url("../fonts/font-name.svg") format("svg");
font-weight: weight of your font (exemple:400,700);
font-style: style of your font (exemple:normal, bold, italic);
}
For modern browsers we need only woff and woff2 formats:
@font-face {
font-family: "Nunito";
src:url("Nunito-Italic.woff2") format("woff2"),
url("Nunito-Italic.woff") format("woff"),
local("Nunito");
font-weight: normal;
font-style: italic;
font-display: swap;
Font weights:
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal (Regular)
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)
950 Extra Black (Ultra Black)