<Coding Blog/>

Using a Custom Font on Your Website

HTML, META TAG, CSS, CUSTOM FONTS, 8/25/2020
I will tell you the only method I currently know, and it is using a meta tag with a little bit of CSS. I’m sure there are other methods, but this is the one I will cover in this article.

The first thing you must do is find the custom font you want to use. I recommend browsing google fonts. Once on google fonts, you can explore their massive collection of custom fonts using their search bar. When you select a font you like, click on the icon with three squares and a plus sign right next to “about”. Then follow these steps:
  1. Click Embed
  2. Copy the HTML Code
  3. Paste the Code in the head
  4. Copy the CSS Code
  5. Paste the Code into Your Stylesheet
  6. ctrl s To Save
So, if you want your H1 text to have the special font, paste the css code after your H1 designator.

HTML Example

Insert into head
<link href="https//fonts. googleapis.com/css2?family=Indie+Flower &display=swap" rel="stylesheet>

CSS Example

Insert into stylesheet
.blogtitle{
font-family: 'Indie Flower', cursive;}


The full css code that I use on this website, as seen at the top of this page, is listed here:
.blogtitle{
font-family: 'Indie Flower', cursive;
font-weight: 300; font-size: 90px;
margin-top: -10px;
border-bottom: 7px rgb(37, 34, 34) solid;
width: 100%;
text-align: center;
padding-top: 22px;
background-color:#52426e;}