2 ways to embed fonts on the web

11/08/2022 15:35

There are a lot of websites that we see today but only use about 9 common fonts – aka web safe fonts.

Consists of:

1. Arial;

2. Time New Roman;

3. Georgia;

4. Tahoma;

5. Verdana;

6. Trebuchet MS;

7. Courier New;

8. Comic Sans MS;


In web design, many times we want to use a few unique fonts to create an aesthetic effect on the viewer. But in the past, when embedding fonts was not possible, designers were forced to use only fonts that people on computers (or other devices) have, and that caused problems. coined the term web-safe fonts – these are the most commonly installed fonts on computers worldwide.

Now everything is solved simply, the designer just needs to put his unique font on the website's host (or third party). When users browse the web, they will download fonts (like downloading images) and see fancy font effects on the website.

The first way: Embed the font directly into the web with code. The following code is included in the CSS file

@font-face {

font-family:abc; // name of the font you want to set

src:url('../fonts/acb.ttf') format('truetype'),

url('../fonts/acb.eot#iefix') format('embedded-opentype'),

url('../fonts/acb.woff') format('woff');




In which the html files are outside, and each specialized section has its own folder like css, image, fonts... The fonts folder to store our fonts.

After we insert the above code into the css file. You use the same font as usual, that is, where you need to use the embedded font, we declare the font-family as the font name that we have set. For example, if you set the title .title to be the embedded font above, you would write the following in the css:

.title {font-family:abc;}

The second way: Embed fonts online

Embedding fonts with Google Font has the advantage of being fast, free, and simple.

You visit the website https://fonts.google.com/ to choose the font you like. Then you click on the pointing arrow (Quick-use)
Select Google font
Select Google font [Click and drag to move]

Google gives you the code to put on the web, the area in the head tag of the HTML page (it's almost like a CSS link), that code looks like this:


You can see that the font name in this example is Ruge Boogie, next, if you want to use this font, then in CSS, you write the following:

body {font-family: 'Ruge Boogie', cursive;font-size:20px;}

So it's done. More information is that Google Font has more than 600 fonts, but not many Vietnamese fonts.