How to connect fonts to wordpress?

@gilbert 

To connect custom fonts to your WordPress website, you can follow these steps:

1. Choose and obtain your custom font: You can either purchase a font from a font library, download a free font, or create your own using font creation software.
2. Upload the font files: Once you have your font files (often in .ttf, .woff, or .woff2 format), you'll need to upload them to your WordPress website. You can do this by connecting to your website via FTP and uploading the font files to the appropriate folder (usually wp-content/themes/your-theme-folder/fonts/). Alternatively, you can use a file manager plugin like File Manager in the WordPress dashboard to upload the font files.
3. Create a CSS file: In order to apply the custom font to your WordPress theme, you need to create a CSS file that contains the necessary styles for the font. You can use a code editor to create a new CSS file (e.g., custom-fonts.css) or you can navigate to Appearance → Customize → Additional CSS in the WordPress dashboard and add the CSS code there.
4. Write CSS code: In the CSS file, you need to define a @font-face rule to import the font and specify its location. Here's an example of how the CSS code may look:

1
2
3
4
5
6
7
8
9

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/your-font-file.ttf') format('truetype');
  /* Additional font file formats and paths go here */
}

body {
  font-family: 'CustomFont', sans-serif;
}

Make sure to replace 'CustomFont' with the name you want to use for your font and 'fonts/your-font-file.ttf' with the path to your font file.

1. Save and enqueue the CSS file: Save the CSS file and enqueue it in your WordPress theme's functions.php file. Open the functions.php file (located within the theme folder) and add the following code at the end:

1
2
3
4

function enqueue_custom_fonts() {
  wp_enqueue_style('custom-fonts', get_stylesheet_directory_uri() . '/custom-fonts.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

1. Save the functions.php file and check your website: Save the functions.php file and refresh your website to see the custom font applied to the desired elements.

That's it! You have successfully connected custom fonts to your WordPress website. Remember to clear your browser cache if you don't see the changes immediately.