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.
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??);
}
pretty much. for example:
@font-face {
font-family: bestfontever;
src: url('fonts/bestfontever.ttf');
}
and see if that works. obviously replace the font names 😀
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!!!!!)
if you’ve uploaded it to a folder called fonts then that url format should do the job 😀
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 = 'http://fonts.googleapis.com/css?family=Playball|Dosis|Raleway|Orbitron|Tangerine', $deps = array(), $ver = null, $media = null );
}
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??
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.
try listing only one source in the @font-face rather than two separated by a comma.
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.
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!)
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.
I’ll write a new thread, having searched and edited all day, can’t resolve this.
@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.
