You have to include an additional which will contain descriptors for the bold text. It allows the use of multiple for a single font. However, the method of using it with the uploaded CSS web fonts is a little bit different. If you want the bold effect, you need to use the font-weight styling property. Tip: a font name has to start with a lowercase letter because an uppercase character can cause complications in IE. By specifying the URL: if local file is unavailable, the CSS sets that the file is automatically downloaded to computers.By specifying the local file: works if users have already already installed the font.You can add the pathway to the font file in two ways: Therefore, the answer to WOFF vs WOFF2 is that WOFF2 is superior and is now becoming the recommended instead of WOFF font format. WOFF2 offers an improved compression and smaller font file sizes. All modern browsers support the fast compression of WOFF fonts (which leads to fonts loading quicker). When you are choosing whether to use OTF or TTF, remember that the difference between OTF and TTF is that TTF is better suited for regular use, while OTF can be better for web designers. It is more suitable for web designers as OTF offers such features as ligatures and smallcaps. OTF is based on TrueType as it also scales without losing quality. It scales without losing quality and the fonts look the same when on screen and when printed. TTF is a file extension widely used by Apple and Microsoft. OTF and TTF are short for OpenType Font and TrueType Font. Src: url( 'mywebfont.eot') /* IE9 Compat Modes */ src: url( 'mywebfont.eot?#iefix') format( 'embedded-opentype'), /* IE6-IE8 */ url( 'mywebfont.woff2') format( 'woff2'), /* Super Modern Browsers */ url( 'mywebfont.woff') format( 'woff'), /* Pretty Modern Browsers */ url( 'mywebfont.ttf') format( 'truetype'), /* Safari, Android, iOS */ url( 'mywebfont.svg#svgFontName') format( 'svg') /* Legacy iOS */ Additionally, you need to indicate the format of each font file to make sure that browsers can recognize and find fonts.Īs a rule, it is best to put newer formats such as WOFF2 closer to the beginning, while formats like TTF can be at the end of the declaration. Remember to set the paths (URLs) to the font files to be moved into your CSS. Uploading CSS web fonts is not difficult. Therefore, you can use unique and rarer fonts for your web designs. However, CSS web fonts changed this rule by allowing developers to set font files to be downloaded when users visit their websites. They guaranteed that the text content would be presented the same to all users. Web-safe fonts were labeled as safe because they were available on many computers.