[Resolved] Best way to use local fonts in style.css?

[Logan]

Tom,

I posted in another thread about preconnecting sites for Google Fonts. I found a couple websites for downloading fonts from Google and hosting them locally. What is the best way to use a custom font family in the style.css to cover all fonts on the site? I was going to use the following CSS.

@font-face {
  font-family: 'Oxygen';
  src:  url('fonts/oxygen.woff2') format('woff2'),
        url('fonts/oxygen.woff') format('woff'),
        url('fonts/oxygen.ttf') format('truetype');
        url('fonts/oxygen.svg#Oxygen') format('svg');
}

@font-face {
  font-family: 'OxygenMono';
  src:  url('fonts/oxygen_mono.woff2') format('woff2'),
        url('fonts/oxygen_mono.woff') format('woff'),
        url('fonts/oxygen_mono.ttf') format('truetype');
        url('fonts/oxygen_mono.svg#OxygenMono') format('svg');
}
body,
button,
input,
select,
textarea, 
html {                                                                                                                                                                                                                                        
  font-family: 'Oxygen';
}

[Tom]

Yea, you can do that, just make sure the file you’re adding it to (style.css) has a fonts folder in the same directory.

You’ll want to make a child theme to do this.

Let me know if you need more info 🙂

[Logan]

I’m good now, thanks! Just needed to know which selectors to use!

[Fernando]

Hi
I’d like to do the same, but calling the font files from CSS field from customizer.
How would be the path is I am placing the fonts in one folder (‘fonts’) of my child theme?
Regards

[Fernando]

I just figured out. I have to put the absolute URL paths. 😛
Thanks anyway.

[Leo]

Glad you figured out 🙂

[Author]

Posts