Support » Theme: Quark » Where to place CSS for @font-face rules

  • Resolved CaptRobovski


    Hi Ahortin,

    Final question (I think!)

    I want to add a few custom fonts using @font-face to the site I’m building. I’m buidling in a localised server using Instant WordPress before porting to live server.

    I’ve noticed that the theme uses PT Sans and Arvo in places, but when I look at the folders packaged within the Quark theme I downloaded, I can’t find files for these (or CSS rules) anywhere.

    Inside the Fonts folder are all the files for FontAwesome, and within the CSS folder are stylesheets with @font-face rules/paths for the various FontAwesome files.

    However, when I load up my site I can see that it’s using PT Sans and Arvo, even though I can’t find rules for these. I can see them referenced by name in the main styles.css file, but I can’t find any references that would tell the browser where to find the fonts to download (i.e. the @font-face rules). My understanding was that you need to specify where a browser can find the necessary font files before you can use it.

    If I want to add my custom fonts to the site, do I just add the relevant stylesheets to the CSS folder, or do I have to add them at the top of the styles.css sheet?



Viewing 2 replies - 1 through 2 (of 2 total)
  • To add custom fonts to your site, it is best to make a child theme, otherwise the next time you update your theme your CSS rules may be overwritten.

    Then create a styles.css file in the child theme folder and add your @font-face rules. Place your font files in the child folder as well.

    Theme Author Anthony Hortin


    You’ll find those (Google) fonts are included through functions.php. If you want to change them, you’ll need to change them in there.

    They’re also used in style.css and editor-style.css (for the TinyMCE styling), so you’ll need to update or add the relevant styles here as well.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Where to place CSS for @font-face rules’ is closed to new replies.