@Font-face for custom BP Themes, BP Daily


After reading Sarah Gooding's @font-face tutorial (which can be found here: https://premium.wpmudev.org/blog/beautiful-typography-for-wordpress-and-buddypress-using-the-font-face-rule/), I decided that using @font-face made more sense than cufon and typekit.

I followed the instructions in the tutorial, but my @font-face font only displays on my site when I view it on my own computer (in Safari and Chrome, but not Firefox), which indicates that I am correctly calling the local font files, but that I'm not correctly calling the web font files.

I wondering 1. where I should be pasting the font declaration, as the tutorial assumes that the user is using the bp-default theme and tells you to paste it in default.css and 2. if I need to change anything from the font declaration that I get in the kit in order to call the web fonts and have them display in all browsers on all computers.

Any help would be appreciated.


  • Mason
    • DEV MAN’s Sidekick


    Glad you liked that post! I read it as well and have been contemplating using @font-face as well.

    where I should be pasting the font declaration

    Are you using a child theme? If so, you can just use the style.css in your child's theme folder.

    if I need to change anything from the font declaration that I get in the kit

    I'm not sure on this one. I believe as long as you drop the appropriate files in the same folder as the file where you added the CSS declaration, you should be fine.

    For instance, in the tutorial article, Sarah calls for the font's EOT file in the css with this:
    src: url('helsinki.eot');
    So the CSS is looking for helsinki.eot in the same directory. Good luck! Let us know if you need anything further! :smiley:

  • S Silver
    • Flash Drive

    Great. Thanks for your help Mason.

    I'm going to give it a shot right now, but I just want to clarify... I should be pasting the declaration in style.css in the child theme, and not child.css, or anywhere else. And then I should be creating a "fonts" folder in the css folder within the child theme?

    Sorry, I just want to make sure that this is done correctly.

    Again, I really appreciate your help.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.