Problem:
I need to include specific font (Futura Bold for my case) in my website but it is not supporting it, whenever I am trying to include it is not reflecting in browser. I double check my HTML and CSS syntax, everything fine but still there has no effect. What is the problem?
Web font what it is?
I am facing the problem just because of the desire font is not standard web fonts hence it is not getting effect. Solution is convert font as web standard and include in project, after that I can use it. Next problem, How?
How to generated any font as web standard font (webfonts)?
Conversion font to webstandard is very easy if you know it. However its not difficult.
There has multiple website to generate webfonts. I have used https://www.fontsquirrel.com/tools/webfont-generator to generate webfonts. This is very easy process, just upload the font and generate it. If the font is not available to you you can download it from website. I have downloaded Futura font from http://www.futurafontfree.com/fonts/futura-book-font-free-download.
The generated webfonts downloaded as zip and after unzip the folder looks like below.
Generated folder comes with multiple files including stylesheet.css file. All of these files I need and might need to edit stylesheet.css file. Initially the style sheet file code looks as
Basically these code is referring to generated files. Keep it as it is.
Include generated webfonts in my project.
Add the folder with all files in my project and next need need to add reference. My complete project is looks like
To include stylesheet in project is very common as we do always. Just add stylesheet by below code:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Change font-family with new font in your code and its done, now run it from browser.
Download complete project from following URL.
https://drive.google.com/file/d/0Bwd4GP6MNsEgN3BSdnI4Y3Zhak0/view?usp=sharing
I need to include specific font (Futura Bold for my case) in my website but it is not supporting it, whenever I am trying to include it is not reflecting in browser. I double check my HTML and CSS syntax, everything fine but still there has no effect. What is the problem?
Web font what it is?
I am facing the problem just because of the desire font is not standard web fonts hence it is not getting effect. Solution is convert font as web standard and include in project, after that I can use it. Next problem, How?
How to generated any font as web standard font (webfonts)?
Conversion font to webstandard is very easy if you know it. However its not difficult.
There has multiple website to generate webfonts. I have used https://www.fontsquirrel.com/tools/webfont-generator to generate webfonts. This is very easy process, just upload the font and generate it. If the font is not available to you you can download it from website. I have downloaded Futura font from http://www.futurafontfree.com/fonts/futura-book-font-free-download.
Generated folder comes with multiple files including stylesheet.css file. All of these files I need and might need to edit stylesheet.css file. Initially the style sheet file code looks as
@font-face { font-family: 'futura_urw_extra_boldregular'; src: url('futurat_bold-webfont.eot'); src: url('futurat_bold-webfont.eot?#iefix') format('embedded-opentype'), url('futurat_bold-webfont.woff2') format('woff2'), url('futurat_bold-webfont.woff') format('woff'), url('futurat_bold-webfont.ttf') format('truetype'), url('futurat_bold-webfont.svg#futura_urw_extra_boldregular') format('svg'); font-weight: normal; font-style: normal;
}
Basically these code is referring to generated files. Keep it as it is.
Include generated webfonts in my project.
Add the folder with all files in my project and next need need to add reference. My complete project is looks like
To include stylesheet in project is very common as we do always. Just add stylesheet by below code:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Change font-family with new font in your code and its done, now run it from browser.
Download complete project from following URL.
https://drive.google.com/file/d/0Bwd4GP6MNsEgN3BSdnI4Y3Zhak0/view?usp=sharing
4 comments:
Post a Comment