Adding a Webkit Font to WP Site

  • Unknown's avatar
    jdn7d · Member ·

    I’m trying to use a Webkit Font. I created a font.css file and added this:

    /**
 * @license
 * MyFonts Webfont Build ID 4087794, 2021-05-12T12:23:50-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: PatentReclame by HiH
 * URL: https://www.myfonts.com/fonts/hihretrofonts/patent-reclame/regular/
 * Copyright: Copyright © 2007-9 HiH Retrofonts. All Rights Reserved. Released by Schriftgiesserei Flinch, Frankfort am Main circa 1895.
 * 
 * Webfont: DINMittelschriftStd by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/din-1451/mittelschrift/
 * Copyright: Copyright © 2014 Monotype Imaging Inc. All rights reserved.
 * 
 * 
 * 
 * © 2021 MyFonts Inc
*/

@import url("//hello.myfonts.net/count/3e5ff2");

@font-face {
  font-family: "DINMittelschriftStd";
  src: url('webFonts/DINMittelschriftStd/font.woff2') format('woff2'), url('webFonts/DINMittelschriftStd/font.woff') format('woff');
}

@font-face {
  font-family: "PatentReclame";
  src: url('webFonts/PatentReclame/font.woff2') format('woff2'), url('webFonts/PatentReclame/font.woff') format('woff');
}

    And then I also added the entire font folder that I downloaded. I added it to the folder that has the lib folder and the style.css file. However, the font isn’t working. I’m not sure if there is another step, because I haven’t found any good documentation on how to do this. Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    kleyhalisson · Member ·

    Hello there. To use a custom CSS, you need a premium plan or higher. Learn more at Additional CSS and Custom CSS.

  • Unknown's avatar
    jdn7d · Member ·

    I’m working on a clients site and we do have the premium plan. I’ve been doing customer css but I just can’t get the font working.

  • kokkieh · Staff ·

    Hi there,

    It is not possible to import you own fonts using @import in custom CSS on WordPress.com, nor can you upload your own fonts.css file directly to the server. The only custom fonts that can be used are the Google fonts already built into WordPress.com:

    https://wordpress.com/support/custom-fonts/

    To use that font would require the Business Plan. Then you can either create a child theme where you import the font in the child theme’s style.css file itself, or you can use a custom fonts plugin to add the font to the site.

    https://wordpress.com/support/business-plan/

  • kokkieh · Staff ·

    And then I also added the entire font folder that I downloaded. I added it to the folder that has the lib folder and the style.css file.

    What is the URL of the site where you’re trying to add this?

    None of what you describe here is possible to do on WordPress.com, so if you’ve been able to do all this, you’re not working on a WordPress.com site, but are instead using the open source version of WordPress at another host.

    In that case, please ask the WordPress.org community for advice, as they provide support for the open source WordPress software. The forum you’re posting in now only provides support for sites hosted on WordPress.com.

    https://wordpress.org/support/forums/

  • The topic ‘Adding a Webkit Font to WP Site’ is closed to new replies.