How To Add and Custom Google Fonts in Blogger or WordPress
How To Add and Custom Google Fonts in Blogger or WordPress
How to Change the Default Font on Blogger and Install
Custom Fonts
- First, you need to choose a font you like from the Google Fonts site. This can take some time, but luckily you can filter your options if you wish.
You can even change the default sample text to whatever you like so you can see exactly what your text will look like with each font.
- Once you find one you like, click on the Quick Use icon
- On the next page, scroll down and grab the “Standard” code
- Highlight the text and copy it to your clipboard (CTRL/CMD + C). If you’re using WordPress, simple paste this into the <head> of your HTML template.
For Genesis (Studiopress), go to Genesis > Theme Settings and insert it into the first Header and Footer scripts section.
- In Blogger, you’ll want to go to Template > Edit HTML and paste it just under the <head> code.
- In Blogger, however, you need to add a trailing slash / to the end of the URL, right before the ending bracket.
- Next, you can add the font to your stylesheet (CSS) wherever you like.
- Copy the CSS code shown on the font page and either replace existing font-family elements with your new font, or create new elements. It helps to know which IDs are applied to the different elements of your blog.
Here are some examples for Blogger that you can add to the CSS portion of the Template Editor:
Remember to replace the font-family bit with your own generated font-family code!!
Change your post title font
h3.post-title, h3.entry-title {font-family: ‘Pacifico’, cursive;}
Change your blog header font
.Header h1 {font-family: ‘Pacifico’, cursive;}
Change your post body font
.post-body {font-family: ‘Pacifico’, cursive;}
Change your date font
.date-header span {font-family: ‘Pacifico’, cursive;}
Change your post footer font
.post-footer {font-family: ‘Pacifico’, cursive;}
Change your previous/next link font
.blog-pager a {font-family: ‘Pacifico’, cursive;}
Change your sidebar title font
.sidebar h2 {font-family: ‘Pacifico’, cursive;}
تعليقات
إرسال تعليق