Adding Custom Fonts to the Topography Array

Hello!

I would like to include a custom font using @font-face command but having trouble… I was wondering if anyone could help me out!

I am following instructions

(http://wpexplorer-themes.com/total/docs/add-custom-fonts/)

(https://premium.wpmudev.org/blog/custom-fonts-css/)

and as it suggests, I would like the font to be available in the typography array in wordpress.

This is what I am doing… but I can’t get it to work!

1) I’ve loaded my fonts (converted to all different formats using fontsquirrel) to a folder called “fonts” within my theme. I am currently using a theme called ‘king’ (not from WPMUDEV).

2) Per instruction, I loaded the @font-face code to the theme’s style.css. I’ve designed the URL to “fonts/custom-font.xxx” since the font folder is already within the theme’s folder.

3) I loaded the ‘function wpex_add_custom_fonts()’ to the functions.php inside the theme.

4) Save the updated files to the server using FTP.

After following these steps… nothing changes to the typography array.

Any help would be very appreciated!!

Best,

Calvin

  • Adam Czajczyk
    • Support Gorilla

    Hey Calvin,

    I hope you’re well today and thank you for your question!

    Are you using a theme from WPExplorer? The “wpex_add_custom_fonts()” function isn’t a core WordPress function, it seems to be their native solution so it won’t work with other themes.

    That said, I think you may want to give this plugin a try:

    https://wordpress.org/plugins/add-font-family-dropdown-to-visual-editor/

    Let me know if it helped!

    Cheers,

    Adam

  • Calvin Kwon
    • Site Builder, Child of Zeus

    Adam,

    Sounds like I was very sleepy on my last post.!

    I couldn't get custom fonts to work : ( ………… Trying to following all the instructions but I am not sure what is going on.

    I am trying to follow the instructions (attached) and I have several questions:

    1) I am currently using fonts from google early access fonts (http://www.google.com/fonts/earlyaccess). Am I allowed to use these as custom fonts using @font-face declaration?

    2) The 2part of the 2nd instruction "All you have to do is link to the stylesheet in your HTML"… where is "HTML"? In different forums it seems like they are saying that HTML = header.php… but is it true?

    3) When linking the stylesheet.css (which is in the font folder), do I modify href part of the link so that it references the correct .css file?

    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

    3) How do I know if the font is loading properly on the website? How can I check whether the issue is a loading problem or rendering problem?

    Best regards,

    Calvin

  • Adam Czajczyk
    • Support Gorilla

    Hey Calvin,

    I hope you’re well today!

    Everybody gets sleepy every once in a while, no doubt about it :slight_smile: As for Google Fonts, I’m pretty sure that those “early access” font are working the same as “normal Google Fonts”, though I haven’t had a chance to try it yet.

    The instruction you’re trying to follow isn’t WordPress-specific. I think however that there might be an easier solution. First, please try this plugin:

    WP Google Fonts

    https://wordpress.org/plugins/wp-google-fonts/screenshots/

    I’m not sure if it works with “early access” font but surely it works out-of-the-box with “normal” Google Fonts. It simply gives you a new settings screen in your dashboard area where you can search Google Fonts (just like on GF page) and easily enable them with just a few clicks, no hassle :slight_smile:

    Another solution would be this plugin:

    https://wordpress.org/plugins/easy-google-fonts/

    None of those plugins will add Google Fonts to the post/page editor but you’ll be able to easily (right from the dashboard) assign font to layout elements.

    Would this be of help for you? Let me know please!

    Cheers,

    Adam

  • Calvin Kwon
    • Site Builder, Child of Zeus

    Adam,

    Thank you for the reply!

    Looks like these are not connected to the early access fonts : /

    Is there any guide that shows how I can upload converted fonts to my server so that I can use it in wordpress? Do I need a special permission from my hosting company? I feel like it should be relatively straightforward but apparently it is not hah.

    Any guidance will be very appreciated..

    Calvin

  • Adam Czajczyk
    • Support Gorilla

    Hey Calvin,

    I hope you’re well today!

    I’ve made some more research on this and it seems like Google Early Access fonts are indeed not handled by most of the plugins as they are not part of “official” Google Fonts suite. According to the Google docs, it turns out that to use those fonts on any website, including WordPress based sites, you don’t even have to download them. It’s only a matter of adding declarations to the theme’s stylesheet. I wasn’t able to force my test WP site (clean install with a default theme and no plugins active) to get it working.

    You can however try to follow this guide here on our blog:

    https://premium.wpmudev.org/blog/custom-fonts-css/

    I tried this with “Noto Sans Tamil UI” font and though I wasn’t able to see the letters as they should look like, I’ve noted some changes (and I wasn’t just WP reverting to the default fonts). I’m not sure but this might be caused by my language settings. And since I don’t speak Tamil I’m not even able to recognize it on my WP language list :slight_smile:

    Having said that, please try to follow the aforementioned guide and let me know of the results. I’ll also speak to my colleagues here and hopefully someome will be able to assist me on this one.

    Cheers,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.