You can try the following steps:
Open your WordPress dashboard and go to the Appearance –> Editor page.
In the editor, open the style.css
file, which is located in the right sidebar under “Stylesheets.”
At the top of the style.css
file, add a new @font-face
rule to define your self-hosted font. The @font-face
rule should include the font’s name, the font file location, and the format. Here is an example of a @font-face
rule for a self-hosted font called “Raleway”:
@font-face {
font-family: "Raleway";
src: url("/wp-content/themes/your-theme/fonts/raleway.woff2") format("woff2"),
url("/wp-content/themes/your-theme/fonts/raleway.woff") format("woff");
}
After defining the @font-face
rule, you can set the font-family property for all elements on your site to your self-hosted font. To do this, add the following code to the style.css
file:
* {
font-family: "Raleway", sans-serif;
}
Save the changes to the style.css file. Your self-hosted font should now be applied to all elements on your site.
To change the font and styling in WordPress embeds, you can try adding the following code to the style.css
file:
.wp-embed {
font-family: "Raleway", sans-serif;
/* Add other styling rules here, such as font size, color, etc. */
}
This will apply your self-hosted font, and any other styling rules to the WordPress embeds on your site.
Note: Make sure to replace “your-theme” with the actual name of your theme in the @font-face
rule and the font file paths. Also, make sure that you have uploaded the font files to the correct location on your server.
I hope this helps! Let me know if you have any questions or need further assistance.