Get the App
SLTechnology News&Howtos  ›  Development  › 

What is the method of embedding special fonts in Css font face web pages

Shulou Source: shulou.com Published: 2022-06-03 06:23:10 10月01日 Update

What is the method of embedding special fonts in Css font face pages? in order to solve this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Special fonts are already in your computer, and now we need to find a way to get the .eot, .woff, .ttf, .svg font formats needed for @ font-face. To get these font formats, we also need a third-party tool, the CSS tutorial @ font-face, to embed special font methods in the web page.

Get special fonts:

Let's take the following singleMalta font for example:

There are only two ways to get singleMalta fonts: one is to find a paid website to buy fonts, and the other is to go to the free website DownLoad. Of course, I don't think anyone will do such a stupid thing of giving money, so we'll get a free place to download it. Where can I find it? I usually go to GoogleWebFonts and Dafont.com to find the fonts I need, and the two recommended to you are both foreign sites, and the opening speed will be relatively slow, as the domestic webmaster font font.chinaz.com is easy to use, of course, there are other places to download fonts online, and there are .TTF in the downloaded file. Then move on to the next step.

Get the special font format required for @ font-face:

Special fonts are already in your computer, and now we need to find a way to get the .eot, .woff, .ttf, .svg font formats needed for @ font-face. To get these font formats, we also need third-party tools or software to implement. I would like to recommend one of my commonly used tools, fontsquirrel and font2web.com. You can also change the format directly to Baidu TTF.

Now you can use special fonts simply by using the Conv_SingleMalta class name.

@ font-face {

Font-family:'Conv_SingleMalta'

Src:url ('fonts/SingleMalta.eot')

Src:local ('☺'), url ('fonts/SingleMalta.woff') format (' woff'), url ('fonts/SingleMalta.ttf') format (' truetype'), url ('fonts/SingleMalta.svg') format (' svg')

Font-weight:normal

Font-style:normal

}

.Conv _ SingleMalta {

Font-family:'Conv_SingleMalta'

}

In short, some special fonts are briefly introduced to you. I hope you can take a look at them more.

The answer to the question about how to embed special fonts in Css font face pages is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Tags: Fonts special formatting methods web pages tools questions solutions places more computers third parties websites help recommendations solutions easy easy two stupid Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno MariaDB Huawei vpn Docker OPPO Reno