Adding Custom Fonts

Fonts have different file formats like ttf, otf, woff, and woff2. The format of the font is very important and the best one for the web is the woff2 one. We will be using the woff and woff2 formats in this tutorial.

Please check if your font has these files: woff and woff2

  • If yes, upload both on your host and save their links.
[Skip the section below and go directly to the @font-face section]

  • If your font came only with 1 format like ttf, you will need to generate the other formats.


Generating the other font formats

  1. Visit https://www.fontsquirrel.com/tools/webfont-generator
  2. Click Upload Fonts
  3. Check the "Yes, the fonts I'm uploading are legally eligible for web embedding." option
  4. Click Download your kit.



@font-face

The @font-face is the code that will load the font on the theme.

If you generated the fonts on the website above, unzip the file you received and look for the stylesheet.css file.
Open it and copy the code inside.

If you skiped the generate step, copy the code below:

@font-face {
font-family: 'bluu_nexttitling';
src: url('bluunext-titling-webfont.woff2') format('woff2'),
url('bluunext-titling-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}



Adding the @font-face to your theme:

Go to Settings > arrow next to the Customize button > Edit HTML

With the html opened, scroll down a bit until you see the General title.
Paste the copied code before or after this title. See my example in the screenshot:


Save the changes.



The next step is to replace the fake URL in the @font-face with the actual URL of your hosted fonts.

@font-face {
font-family: 'bluu_nexttitling';
src: url('bluunext-titling-webfont.woff2') format('woff2'),
url('bluunext-titling-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Replace the red text with the woff2 hosted font URL.

Replace the fuchsia text with the woff hosted font URL.

Save the changes once again.


Replacing the old font in the styles

Now, we will make the new font appear in the theme.
Still in the HTML code:

  1. Click once anywhere inside the HTML to enable the search
  2. Use ctrl+F or cmd+F to open a search box
  3. Search for END CSS
  4. Copy the code below and paste above /* ---  END CSS --- */
  5. Save the changes.

#Header1 h1,
.slide-more,
.post ol li:before,
#HTML50 h3,
#HTML60 h3,
#HTML600 h3,
#PopularPosts99 h3,
.single-view .post-author span,
#related-posts h4,
.comments h3,
.contact-form-button-submit,
#ContactForm100_contact-form .contact-form-button-submit,
#ContactForm100_contact-form-submit.contact-form-button.contact-form-buttom-submit {
font-family: "Font Name Here", serif;
}


The code above has all the spots where the handwritten font appears in the Himmel theme.
We need to replace the "Font Name Here" with the font-family name of your @font-face code. 

So:

  1. copy the font-family line in your @font-face code
  2. replace the font-family line that you just added on the theme
  3. save the changes


In my example, this is how the results will be:

#Header1 h1,
.slide-more,
.post ol li:before,
#HTML50 h3,
#HTML60 h3,
#HTML600 h3,
#PopularPosts99 h3,
.single-view .post-author span,
#related-posts h4,
.comments h3,
.contact-form-button-submit,
#ContactForm100_contact-form .contact-form-button-submit,
#ContactForm100_contact-form-submit.contact-form-button.contact-form-buttom-submit {
font-family:  'bluu_nexttitling';
}




Changing font size

This step is optional. I just added it here because fonts often have different sizes and the font-size set in the theme may be too big or too small.
You can copy the code ahead and paste it below the previous code. You will only change the numbers and be careful to not delete or add any spaces in the px after them.

/* website title font size */
#Header1 h1 {
font-size: 60px;
}

/* slider read more link font size */
.slide-more {
font-size: 35px;
}

/* post list numbers font size */
.post ol li:before {
font-size: 35px;
}

/* about name font size */
#HTML50 h3 {
font-size: 60px;
}

/* youtube title font size */
#HTML60 h3 {
font-size: 60px;
}

/* instagram @username font size */
#HTML600 h3 {
font-size: 60px;
}

/* popular posts title font size */
#PopularPosts99 h3 {
font-size: 60px;
}

/* post signature font size */
.single-view .post-author span {
font-size: 40px;
}

/* related posts title font size */
#related-posts h4 {
font-size: 60px;
}

/* comments title font size */
.comments h3 {
font-size: 60px;
}

/* contact form send button font size */
.contact-form-button-submit,
#ContactForm100_contact-form .contact-form-button-submit,
#ContactForm100_contact-form-submit.contact-form-button.contact-form-buttom-submit {
font-size: 35px;
}

Contact Form