With the @ font-face directive, a webmaster can connect one or several custom fonts to their site. But this method has its advantages and disadvantages.
Advantage:
- Through CSS, connect fonts in any format: ttf, otf, woff, svg.
- The font file will be located on site server, it will not rely on third-party services.
Disadvantages:
- In order to connect the fonts of each style correctly, a separate code must be registered.
- Without understanding CSS, it is confessing.
However, if you can simply copy the completed code and to specify values in it, then this is not a real problem.
Note: Before starting, make sure to create child-theme for your website. In this way, you can make all edits to the sub-theme while keeping the core theme unchanged so that it can be easily updated in the future as needed.
Step 1: Create a “font” folder
In your sub-theme, create a new “fonts” folder in the following location: wp-content / themes / your- child-theme / fonts
Step 2. Upload the downloaded font file to the website
This can be done through the host’s control panel or FTP.
Add all font files to the newly added font folder:
wp-content / themes / your-child-theme / fonts you created.
Step 3. Import fonts through sub-theme style sheets
Open the style.css file of site child theme and add the following code to the beginning of the CSS file (after the child theme comment):
@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') format ('embedded-opentype'),
url ('fonts / WebFont.woff') format ('woff'),
url ('fonts / WebFont.ttf') format ('truetype'),
url ('fonts / WebFont.svg # svgwebfont') format ('svg');
font-weight: normal;
font-style: normal;
}
Where MyWebFont is replaced with the name of the font, and the value of the src attribute (the data in parentheses with quotes) is its position (relative link). Specify each style separately. Because the normal style is connected first, the font-weight and font-style properties are set to normal.
Step 4. When adding italics, please write the following:
@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') format ('embedded-opentype'),
url ('fonts / WebFont-Italic.woff') format ('woff'),
url ('fonts / WebFont-Italic.ttf') format ('truetype'),
url ('fonts / WebFont-Italic.svg # svgwebfont') format ('svg');
font-weight: normal;
font-style: italic;
}
Everything is the same, the only difference is that the font-style attribute as been appended to italics.
Step 5. To add bold custom fonts, add the following code:
@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Bold.eot');
src: url ('fonts / WebFont-Bold.eot? #iefix') format ('embedded-opentype'),
url ('fonts / WebFont-Bold.woff') format ('woff'),
url ('fonts / WebFont-Bold.ttf') format ('truetype'),
url ('fonts / WebFont-Bold.svg # svgwebfont') format ('svg');
font-weight: bold;
font-style: normal;
}
The font-weight attribute has been set to the bold position.
Remember to indicate the correct location of the font file for each style.
Step 6. To connect bold italics custom fonts, type the following:
@ font-face {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Italic-Bold.eot');
src: url ('fonts / WebFont-Italic-Bold.eot? #iefix') format ('embedded-opentype'),
url ('fonts / WebFont-Italic-Bold.woff') format ('woff'),
url ('fonts / WebFont-Italic-Bold.ttf') format ('truetype'),
url ('fonts / WebFont-Italic-Bold.svg # svgwebfont') format ('svg');
font-weight: bold;
font-style: italic;
}
Okay, that’s all. Now, you have connected four font styles into the website. But one thing to say-this font connection will not be displayed correctly in Internet Explorer 8.
Packaging custom fonts for WordPress
What do users first notice when they visit a website? Yes, its design! Most designs rely on the correct use of beautiful fonts. Therefore, pay attention to the font design of the website. Add code or use one of the previously discussed plugins to embed new font styles. Which method you choose depends on you. Make sure that no more than two fonts are used on the same site. As more custom fonts are added to the site, the site becomes slower.
1 Comment