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?


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;
  • If the font is inside the same directory as the stylesheet, the full path shouldn't be necessary. /fonts/FontName-Regular.ttf should be sufficient. – Jacob Peattie Dec 20 '18 at 5:21
  • If it helps don't forget to mark the answer as correct ;) – Castiblanco Jan 14 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.