how to install custom font

  • Resolved JudahsMom63

    (@judahsmom63)


    8 years, 4 months ago

    I have webkits of a particular font that I want to use in my WordPress site. I have put the kits, their css, and other related files in a folder called “css” in my child theme folder. I have put `function load_fontstyle() {
    wp_register_style(‘stylesheet’, get_stylesheet_directory_uri() . ‘/css/stylesheet.css’);
    wp_enqueue_style( ‘stylesheet’);

    }in my functions.php. In my header I put<script src=”https://use.typekit.net/svg7htz.js”></script&gt;
    <script>try{Typekit.load({ async: true });}catch(e){}</script>because the instructions I found online told me to. I've also tried@import url(“mytheme/css/stylesheet.css”);` and
    @import url("../mytheme/css/stylesheet.css"); in my child theme css but no matter what I try my custom font won’t appear. I’m working in localhost so I don’t have a url to share. Can anyone help me, please?

Viewing 6 replies - 1 through 6 (of 6 total)
  • kjodle

    (@kjodle)

    8 years, 4 months ago

    because the instructions I found online told me to.

    You should provide a link to those instructions.

    Digico Paris

    (@digico-paris)

    8 years, 4 months ago

    Hello,

    If you use Typekit, why not put that in overall header.php? Would be much faster to me, plus typekit has nice CDN, accelerating font from anywhere on planet.

    Then just use font-style as you need in theme’s css file?

    Should just work fine.

    Susan Langenes

    (@susanlangenes)

    8 years, 4 months ago

    Look in the stylesheet.css file and see if there are links to the locations of the font files themselves. You may need to prepend those links with your /css directory.

    Digico Paris

    (@digico-paris)

    8 years, 4 months ago

    Bottom of my argument is, you actually try to load a typekit font from a full CSS approach. This is supposed to be better if you’re a paying customer, but if any issue you can grab fonts from their CDNs – which is also good from a worldwide load time standpoint.

    Like directly in html <head>, as I do for Google fonts:

    <!– HTML head fonts call –>

    <link href=’https://fonts.googleapis.com/css?family=Raleway:400,700&#8242; rel=’stylesheet’ type=’text/css’>

    <!– End of HTML fonts call –>

    Concept behind is that font is already translated into a CSS call, before any rendering in app. Thus, no need to bother with inside CSS @font-face definition stuff.

    I’m quite sure typekit does provide the same kind of call, just reproduce it, according to Typekit standards. Although HTML font call make issues with spacing, indenting, and such.

    It’s not as precise as a 100% call from server (@ import, font definition). But, it might help.

    Hope it helps a bit,

    Thread Starter JudahsMom63

    (@judahsmom63)

    8 years, 4 months ago

    Susan – your solution worked! Thank you for taking time out of your weekend to help me!

    kjodle and Digico – thanks for answering my post. I really appreciate it!

    Digico Paris

    (@digico-paris)

    8 years, 4 months ago

    You’re welcome, glad problem is solved 🙂 (not many people tell when it’s solved).

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘how to install custom font’ is closed to new replies.