Declare @Font-face
Declare @font-face at the top of the css file, specifying the path to where the font is stored.
@font-face {
font-family: myFont;
src: url(font_vietvang.woff2);
}
myFont : declared font name
font_vietvang.woff2 : The font file needs to be declared in woff2 format
Browser support
There are many font formats for you to choose from.
But there are formats that support one browser but not another.
There is kind of new browser support but not old browser support.
=> So if you want to use it effectively, you should understand it clearly.
Optimal usage
Isn’t that why you choose a font with TTF, OTF or WOFF format because it supports most browsers? .I will explain each font more clearly for you to understand better.
When using font-face for web you should use many different formats on 1 font-face.
Why so :
Common order of declaration: woff2 -> woff -> ttf/otf -> svg -> eot. When you declare multiple font loading paths. The browser will search in order from left to right. If a format is supported, it will rebuild in that format and not load other formats.
- Why use woff2 first
- Because this font is the lightest font type. It reduces the load when the page loads.
- But its disadvantage is that it does not support low-version browsers.
- woff :
- Likewise, it has a heavier capacity than woff2.
- But it uses many browsers with lower versions. So it has 2nd priority.
- ttf/otf
- Fonts with this format support many low-version browsers. Especially safari can support from 3.1 and up.
- But its disadvantages are very serious.
- svg, eot :
- Look at the browser support table above and you’ll know. It supports very few browsers.
- But its advantage is that it supports extremely low browsers. For example, eot can support from IE 6. Personally, I rarely use these 2 fonts. Because nowadays no one uses extremely low versions like this anymore. Even though it supports so few browsers, it has a large storage capacity => that’s also the reason I don’t use it.
=> Depending on the intended purpose, you can choose appropriate font formats
