'4 things I don't understand about @font-face

I have a personal website https://pauoliver.net/ that uses 2 Google Fonts: Ubuntu and Open Sans.

This is how I'm loading the fonts now:

@import url(https://fonts.googleapis.com/css?family=Ubuntu&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans&display=swap);

And then:

body {
    font-size: 20px;
    max-width: 40em;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
    line-height: 30px;
    padding: 5px;
    background-color: #f5f5f5;
}

and

#masthead h1 a {
    font-family: 'Ubuntu', sans-serif;
}

I want to self host them but I don't understand 3 things:

1. How to actually host them. I downloaded the .rar, and then I guess you just drop the .ttf files inside a folder in your cPanel? I'm sure this is a dumb question, but all the posts I found online skip over this. (My website is hosted on Namecheap)

2. How to load them with @font-face. I've tried this and it doesn't work:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  src: url(/fonts/Ubuntu/Ubuntu-regular.ttf) format('truetype');
  font-display: swap;
}

3. Why do all the examples online have "woff" and "woff2" formats? The fonts from Google are .ttf. Do I have to convert them to .woff2?

4. If loaded correctly, how do I "apply" them? Do I just keep the code as it is? Like this:

#masthead h1 a {
    font-family: 'Ubuntu', sans-serif;
}

Or do I have to reference the font differently?

Thank you for your time and help.

I'm not good at coding, I just made my own website because I find it fun and cool to do, but I'm an amateur, and all the tutorials I found online were advanced and didn't even acknowledge these questions I have, so I'm lost.

htmlcssfonts


Solution 1:[1]

You are right about all those things. Browsers use .woff format because it is smaller in size compared to .ttf.

People usually prefer using Google Fonts API because it will dynamically determine the best font format to serve to users.

Did the fonts not work when you hosted them yourself? In that case, we will need a working demo of exactly what you did.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Real Noob

Related Questions