Scriptcraft – Fonts

[SHID] Belgrade
Joined 23/07/2020
Posts 11,931
04:47 AM 20/09/2020
LANGUAGES:
- CSS


There are such ways to use fonts, but how do you use fonts for a webpage? Let's start with the documentation.
Lets use a simple example:


body {
**font-family**: Helvetica;
}


Do you notice the font-family? That attribute indicates the certain font for the website.
You can add any fonts! But it will take a while. The code will be something like this.

*Importing a font:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');


You can also use other sites, but Google Fonts is a popular option.


Using the font you uploaded:

@font-face {
font-family: Example Font;
src: url(example-font.ttf);
}


You may have noticed the .ttf file extension, you might wonder, what is it? .ttf, .woff, .eot, .otf, .woff2 indicates the file is a font.


I hope you enjoyed the tutorial!


mxqt
Joined 02/12/2019
Posts 17,971
04:47 AM 20/09/2020
thanks


[P00R] L.O_L
Joined 26/06/2020
Posts 462
04:49 AM 20/09/2020
i dont get it


[SHID] Belgrade
Joined 23/07/2020
Posts 11,931
04:51 AM 20/09/2020
Quote from L.O_L , 04:49 AM 20/09/2020
i dont get it
This will help. Sorry if my tutorial didn't get you:
https://www.w3schools.com/css/css_font.asp


[IDSN] n4p
Joined 21/10/2019
Posts 1,727
05:30 AM 20/09/2020
<!DOCTYPE html>
<html>
<head>
<title="Font Demonstration"


[IDSN] n4p
Joined 21/10/2019
Posts 1,727
05:37 AM 20/09/2020
Quote from n4p , 05:30 AM 20/09/2020
<!DOCTYPE html>
<html>
<head>
<title="Font Demonstration"
Accidentally hit enter when I wasn't finished, here's the final product:

<!DOCTYPE html>
<html>
<head>
<title>Font Demonstration</title>
<meta charset="utf-8">
</head>

<body>
<h1 style="font-family: Helvetica;">Lorem Ipsum Dolor Sit Amet...</h1>
</body>
</html>



When run this should display "Lorem Ipsum Dolor Sit Amet..." in the top left of the page with the Helvetica font.

1