WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Where to place CSS for @font-face rules (3 posts)

  1. CaptRobovski
    Member
    Posted 1 year ago #

    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?

    Thanks!

    Rob

  2. stacyduval
    Contributor Day Volunteer
    Posted 1 year ago #

    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.

    http://codex.wordpress.org/Child_Themes

    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.

  3. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic