How to add some non-standard font to a website?
Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. But I can’t find the right way to add that font on the server. And how do I include that font with CSS into the HTML? Is this possible to do without graphics?
Since this question was asked, @font-face has become much more widely supported and is recommended for general use. You just have to be aware that IE requires fonts in a different format to other browsers. See stackoverflow.com/questions/2219916/is-font-face-usable-now
www.fontsquirrel.com seems great to generate the required font files & create a good bullet-proof @fontface syntax (same as the recommended fontspring.com/blog/fixing-ie9-font-face-problems)
21 Answers 21
This could be done via CSS:
It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).
It’s not useless since it’s standard : the more you implement it, the more it will likely be implemented by browsers. That does not mean you should not find another way to compensate, but using this as a complement seems good to me.
@brendanjerwin: updated the updated version of your link -brendanjerwin.com/blog/2009/03/03/embedding-fonts
Hey guys, guess what? It’s now almost 2016! It’s now supported widely! Yay! Glad, I found this answer this late. Haha.
You can add some fonts via Google Web Fonts.
Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face (read about it).
The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.
In July 2014, google has expanded the fonts and included Google Noto fonts which support most languages google.com/get/noto/# . Abobe has supported this open font initiative supporting all languages blog.typekit.com/2014/07/15/introducing-source-han-sans
it seems (Google web fonts) doesn’t support .eot and .woff and .svg versions of fonts. it just supports .ttf version of fonts!
The way to go is using the @font-face CSS declaration which allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.
Take a look at the following table:
As you can see, there are several formats that you need to know about mainly due to cross-browser compatibility. The scenario in mobile devices isn’t much different.
Solutions:
1 — Full browser compatibility
This is the method with the deepest support possible right now:
2 — Most of the browser
Things are shifting heavily toward WOFF though, so you can probably get away with:
3 — Only the latest browsers
Or even just WOFF.
You then use it like this:
References and Further reading:
That’s mainly what you need to know about implementing this feature. If you want to research more on the subject I’ll encourage to take a look at the following resources. Most of what I put here is extracted from the following
CSS Web Fonts
Web fonts allow Web designers to use fonts that are not installed on the user’s computer.
When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your «own» fonts are defined within the CSS @font-face rule.
Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.
The Web Open Font Format (WOFF 2.0)
TrueType/OpenType font that provides better compression than WOFF 1.0.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
Browser Support for Font Formats
The numbers in the table specifies the first browser version that fully supports the font format.
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: The font format only works when set to be «installable».
Using The Font You Want
In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then point to the font file.
Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
Example
@font-face <
font-family: myFirstFont;
src: url(sansation_light.woff);
>
div font-family: myFirstFont;
>
Using Bold Text
You must add another @font-face rule containing descriptors for bold text:
Example
The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.
This way you can have many @font-face rules for the same font.
CSS Font Descriptors
The following table lists all the font descriptors that can be defined inside the @font-face rule:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Optional. Defines how the font should be stretched. Default is «normal» |
| font-style | normal italic oblique | Optional. Defines how the font should be styled. Default is «normal» |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optional. Defines the boldness of the font. Default is «normal» |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF» |
How to import fonts in CSS?
I want to use some fonts and I want it to work without having this font on the client computer. I have done this but it doesn’t work:
6 Answers 6
Following lines are used to define a font in css
Following lines to define/use the font in css
Highly recommend fontsquirrel.com/tools/webfont-generator for converting fonts for web and generating the CSS.
One of the best source of information on this topic is Paul Irish’s Bulletproof @font-face syntax article.
Read it and you will end with something like:
/* definition */ @font-face < font-family: EntezareZohoor2; src: url('fonts/EntezareZohoor2.eot'); src: url('fonts/EntezareZohoor2.eot?') format('☺'), url('fonts/EntezareZohoor2.woff') format('woff'), url('fonts/EntezareZohoor2.ttf') format('truetype'); font-weight: normal; font-style: normal; >/* use */ body When I went to Google fonts all they gave me were true type font files .ttf and didn’t explain at all how to use the @font-face to include them into my document. I tried the web font generator from font squirrel too, which just kept running the loading gif and not working. I then found this site —
I had great success using the following method:
I selected the Add Fonts button, leaving the default options, added all of my .ttf that Google gave me for Open Sans (which was like 10, I chose a lot of options. ).
Then I selected the Convert button.
Heres the best part!
They gave me a zip file with all the font format files I selected, .ttf , .woff and .eot . Inside that zip file they had a demo.html file that I just double clicked on and it opened up a web page in my browser showing me example usages of all the different css font options, how to implement them, and what they looked like etc.
I still didn’t know at this point how to include the fonts into my stylesheet properly using @font-face but then I noticed that this demo.html came with it’s own stylesheet in the zip as well. I opened the stylesheet and it showed how to bring in all of the fonts using @font-face so I was able to quickly, and easily, copy paste this into my project —
@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-LightItalic.eot'); src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-SemiBold.eot'); src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Regular.eot'); src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Light.eot'); src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Italic.eot'); src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot'); src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot'); src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'), url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; >@font-face < font-family: 'Open Sans'; src: url('fonts/Open_Sans/OpenSans-Bold.eot'); src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'), url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; >The demo.html also had it’s own inline stylesheet that was interesting to take a look at, though I am familiar with working with font weights and styles once they are included so I didn’t need it much. For an example of how to implement a font style onto an html element for reference purposes you could use the following method in a similar case to mine after @font-face has been used properly —
html, body < margin: 0; font-family: 'Open Sans'; >.banner h1 < font-size: 43px; font-weight: 700; >.banner p