How To Use Custom Fonts On Your Website With CSS?
Create a css block like the following. “MyCustomWebFont” is the name of my new web font style i will use on website.
src: url("bttf.eot"); /* EOT file for IE */
src: local(bttf_font), url(‘fonts/bttf.ttf’) format(‘opentype’); /* TTF file for CSS3 browsers */
Put the css created above on <head> section or in external stylesheet. Once placed place the bttf.ttf file inside the same folder your stylesheet is in. Remember that bttf.ttf does not work in old versions of IE(Internet Explorer) so you will need to create a EOF(Embedded OpenType) font file from .ttf. This is a good tool for converting .ttf files in to .eof file. Once converted download bttf.ttf and place at the same folder your bttf.ttf was placed.
Write some sort of HTML block for testing. In the above example we created css style for <h1> for try something like this in your HTML page:
[html]<h1>The quick brown fox jumps over the lazy dog</h1>[/html]
Hello Friends, I’m Arvind Kumar, founder of Inimist Technologies, Inimist Academy, The Fundabook and many more. I am a Full Stack Web Developer and Programmer by heart, and a Hindi/English blogger by chance. I build Web and Mobile Application around React, VueJS, NodeJS and PHP frameworks.
Have a project in mind? Get in touch