Using my own fonts in WordPress

  • ccuny

    (@ccuny)


    8 years ago

    Hello community,

    I have done a search on WordPress.org but I am as confused as ever, even after trying to use the AnyFont plugin.

    I want to use my own fonts in WordPress. What I would really like is just to be able to select a TTTF or OTF on my hard drive, make it part of my site and accessible from my visual page builder (currently visual composer) or wysiwig text editor.

    But that’s not possible. So I started looking at WOFF and WOFF2, in the understanding that I needed those formats. So I converted one of my fonts to WOFF and WOFF2, and get the CSS that contains the font family name and the SRC URL params which I know I need to edit. But when I tried to use AnyFont (I think I tried another plugin too) to set the the font, it seemed geared mostly to online font libraries or and the self-hosted route failed in that it would not generate a path. Which means I don’t know how to edit the URLs.

    So, first of all, where do I upload the font files? Can I use the media folder in WP or do I need to upload them to a specific location on the site by FTP?

    Then, once the font is uploaded to the right place, what is the easiest way to “enable” or “activate” that font in WP? By easiest, read using some kind of a plugin, because is have no clue how to start editing themes/CSS. That’s why I tried AnyFont, but I found it really confusing (in its layout and lack of interactive assistance). Is there not a decent plugin, free or paid, that can take me from the fonts on my hard drive (before or after their conversion to WOFF) to easy access and use in whatever front-end tool I use?

    I would really value your suggestions.

    Kind regards

    Chris

Viewing 1 replies (of 1 total)
  • bemdesign

    (@bemdesign)

    8 years ago

    1) I recommend learning about HTML/CSS and at least some familiarity about javascript – they really are fundamental to understanding the web and will help you in your quest on getting fonts up to your website.

    2) I put my CSS code in the stylesheet of the theme and usually place the font files in a directory named “fonts” inside the theme folder. If you’re using a pre-built theme, make sure to use a child theme so that your customizations don’t get overwritten in a theme update. I then use the wp_enqueue_style() function in my theme’s functions.php file to load in my stylesheet. To view it in the editor you’ll also need to use the add_editor_style() function to pull in the appropriate stylesheet(s) to show in the editor. This is basically what all those plugins are doing. For more information on how to include custom CSS and/or JS in your theme, please see: https://developer.wordpress.org/themes/basics/including-css-javascript/

    3) Most fonts have licenses – make sure you have an appropriate license before putting it up on your website. This is why it’s so popular to use google fonts or other hosted webfont services – the licensing is taken care of and it’s fairly simple to use.

    Hope this helps!

Viewing 1 replies (of 1 total)

The topic ‘Using my own fonts in WordPress’ is closed to new replies.