• Hi, I’m a newbie.
    Several sources of advice say use a child theme, then same websites advice edit header or functions to make changes.

    So… I’d like a serif font and maybe another typography too, (not sure if google fonts will slow website down?)… my readings so far say..
    1). imbed font code into header.php – do I make a child header.php and add it there? what would my intro code look like?
    2). add name of fonts to font family via style.css – child obviously. do I just go for it…?
    body { colour: black fnt-size: 14px, font-family: xxbest font }

    using twentysixteen
    https://www.ursulaholdengill.com

Viewing 14 replies - 1 through 14 (of 14 total)
  • jack randall

    (@theotherlebowski)

    definitely use a child theme if you’re going to change anything about it’s style or functionality.

    linking to external fonts will slow your site down but in the range of milliseconds so unless the server they’re calling is swamped you shouldn’t notice too much difference.

    if you can download the fonts then it might be worth uploading them to the child theme in a folder called fonts and then using the @font-face css feature in the child theme’s style.css file to call the new fonts.

    Thread Starter mrsmill

    (@mrsmill)

    Thank you Jack.
    So…
    download my 2 fonts.
    via ftp add a new folder ‘fonts’ to child theme folder

    then the only code required is in style.css, eg
    @font-face {
    font-family: bestfontever;
    src: url(my host??);
    }

    jack randall

    (@theotherlebowski)

    pretty much. for example:

    @font-face {
    font-family: bestfontever;
    src: url('fonts/bestfontever.ttf');
    }

    and see if that works. obviously replace the font names ??

    Thread Starter mrsmill

    (@mrsmill)

    I’ll give that a try after walking the dog, I’m not confident about the url bit, but I’m sure it’ll make sense eventually. (Thank you!!!!!)

    jack randall

    (@theotherlebowski)

    if you’ve uploaded it to a folder called fonts then that url format should do the job ??

    David_G

    (@questas_admin)

    If you want to add google fonts add this to your child theme functions.php file. Change the fonts listed on this snippet, then you can style theme in your style sheet and/or use them in your pages/posts.

    // Add Google Font
    add_action( 'wp_enqueue_scripts', 'my_google_font' );
    function my_google_font() {
    wp_enqueue_style( $handle = 'my-google-font', $src = 'https://fonts.googleapis.com/css?family=Playball|Dosis|Raleway|Orbitron|Tangerine', $deps = array(), $ver = null, $media = null );
    }
    Thread Starter mrsmill

    (@mrsmill)

    I’m back.
    I’ve added.. files via ftp and…

    /* font family */
    @font-face {
    font-family: ‘Junge’, serif, ‘Eagle Lake’, cursive;
    src: url(‘fonts/junge-regular.ttf, fonts/eagleLake-regular.ttf’);
    }

    and then I also added the above enqueue.

    However….
    If I’m writing a page or post, how do I choose a font? Or do I need to write in css body=junge h1=eaglelake??

    Thread Starter mrsmill

    (@mrsmill)

    Hello again! I’ve added

    h1 {
    color: #ea503f;
    font-family: ‘Eagle Lake’, eaglelake, regular;
    font-size: 2.5em; /* 40px/16=2.5em */
    }
    h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
    }
    p {
    font-family: ‘junge’, serif;
    font-size: 0.875em; /* 16px/16=0.875em */

    but the eagle lake font isn’t showing. it’s a cursive font.

    jack randall

    (@theotherlebowski)

    try listing only one source in the @font-face rather than two separated by a comma.

    Thread Starter mrsmill

    (@mrsmill)

    I removed the junge so the eagle lake can be tested. But no joy. (however h1 has gone red as above css directs).
    Wondering if I’m using the right spelling/code grammar.

    google font web say “font-family: ‘Eagle Lake’, cursive;”
    the filename; “EagleLake-Regular.ttf”

    I’ve read hints to use lower case for ie compatability.

    Thread Starter mrsmill

    (@mrsmill)

    I’ll click resolved – but my issue has mutated.
    The above advice is one of several methods of embedding google fonts.
    However, I’ve just the issue of transforming post/page headings which are not responding to above or plugins or other methods (tried them all today!)

    Thread Starter mrsmill

    (@mrsmill)

    Earlier, the inspect element showed these headings had lots of crossed out info, I presume this is conflicting instructions. Not sure which to pay attention to.

    Thread Starter mrsmill

    (@mrsmill)

    I’ll write a new thread, having searched and edited all day, can’t resolve this.

    David_G

    (@questas_admin)

    @mrsmill if you use the enqueue method, you don’t need to add the fonts anywhere else. Just use css to make global changes, and you can use the fonts in your post editor also.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘change font – do I need child header.php?’ is closed to new replies.