php - Underscore - Self hosted fonts

Trying my hand on building a theme with sass, having a bit of a problem with figuring out how to use my self hosted font in the project. This is probably dirt simple, and as usual I'm overcomplicating things in my mind.

When using google fonts i enqueue them from functions.php and reference the enqueued font in my stylesheets, but with a self hosted font the suggestion i find is that i should import them through @import into my stylesheet.

If i have a fonts folder in the root of my theme, containing my font, using the basic structure of a sass generated underscores theme, what is the most efficient way of incorporating that font into my theme?

Trying my hand on building a theme with sass, having a bit of a problem with figuring out how to use my self hosted font in the project. This is probably dirt simple, and as usual I'm overcomplicating things in my mind.

When using google fonts i enqueue them from functions.php and reference the enqueued font in my stylesheets, but with a self hosted font the suggestion i find is that i should import them through @import into my stylesheet.

If i have a fonts folder in the root of my theme, containing my font, using the basic structure of a sass generated underscores theme, what is the most efficient way of incorporating that font into my theme?

• php
• customization
• theme-development
• sass

Share Improve this question asked Dec 19, 2018 at 21:26 Catalina GonzalezCatalina Gonzalez 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Using @import is the way to go, you can do something like this on your stylesheet:

@font-face {
    font-family: FontName;  
    src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf);  
    font-weight: normal;  
}

Then you simply use it as usual.

p {
    font-family: FontName;
}