How to use Custom, Local Fonts

While using Google Fonts in Picostrap is simple and straighforward, as you just need to choose them with the Customizer interface, using custom local fonts requires a bit of fiddling around.

Here's how to.

Step 1: Start with a child theme

First of all, in order to do this in a clean way, start by using a child theme. Get our starter child theme if you haven't yet

Step 2: Upload font

In the child theme, make a /fonts/ folder. Upload your custom font, in .woff2 format only, as it's today the best choice, inside the folder.

Step 3: Edit the SCSS

Open and edit the file sass/_custom .scss adding the following code, personalising it for your own font:

  • put your own custom font name in place of PlayFair Display
  • put your own custom font filename in place of playfair-display.woff2
 @font-face { 
 font-family: 'Playfair Display'; 
 src: url('../fonts/playfair-display.woff2') format('woff2'); 
 font-display: swap;
 }

 

Step 4: Open the Customizer and set the font

Launch the WordPress Customizer, go to the Typography section,

and insert  the font name (in our example, that would be Playfair Display) in the  "Font Family Base" text field

(alternatively, use the  "Headings Font Family" field if you want the custom font only for headings)

Step 5: Publish

Upon hitting the Publish button, if all was done correctly, you should be able to see the font correctly!