Using custom fonts using CSS?
I’ve seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.). And they support a nice amount of browsers. How does one do that? While also preventing people from having free access to download the font, if possible.
8 Answers 8
Generically, you can use a custom font using @font-face in your CSS. Here’s a very basic example:
Then, trivially, to use the font on a specific element:
( .classname is your selector).
Note that certain font-formats don’t work on all browsers; you can use fontsquirrel.com’s generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don’t have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn’t possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren’t very practical.
Thank you for the great detailed answer. May I ask if that kind of approach works for the older browsers as well? Such as.. IE8/7/6? And by the way, are all of the fonts displayed on Google Webfonts free for commercial use?
@Don @font-face works with all reasonably-new browsers, but you need to have the right formats; that’s why I recommended using fontsquirrel.com to automate the process of conversion and rule-generation. And yes, Google Webfonts are free for commercial use (little link for more info).
@Chris, Is omitting the font-style: and font-weight: in your @font-face declaration violating any standards?
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
You have to download the font file and load it in your CSS.
F.e. I’m using the Yanone Kaffeesatz font in my Web Application.
Today there are four font container formats in use on the web: EOT, TTF, WOFF, and WOFF2.
Unfortunately, despite the wide range of choices, there isn’t a single universal format that works across all old and new browsers:
- EOT is IE only,
- TTF has partial IE support,
- WOFF enjoys the widest support but is not available in some older browsers
- WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
Hi Hitesh. May I ask what is the use of #iefix ? and this part font-family: ‘besom’; !important , the !important is outside the ; ?
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
Although im not sure about preventing someone from downloading your font.
there’s also an interesting tool called CUFON. There’s a demonstration of how to use it in this blog It’s really simple and interesting. Also, it doesn’t allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc. What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
First of all, you can’t prevent people from downloading fonts except if it is yours and that usually takes months. And it makes no sense to prevent people from using fonts. A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this: There is a pretty simple and free way to implement fonts into your website. I would recommend Google fonts because it is free and easy to use. For example, I’ll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers) This is how it would look like: HTML
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Подключение шрифтов в CSS
Если не вникать в подробности, по быстрому подключить шрифт можно так:
/* Обычный */ @font-face < font-family: 'FontName'; src: url(/fonts/font.ttf); >/* Жирный */ @font-face < font-family: 'FontName bold'; src: url(/fonts/font-bold.ttf); >.text-1 < font-family: 'FontName'; font-size: 20px; >.text-2
Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:
- Нет названия шрифта в свойстве local .
- Подключен только один формат шрифта.
- Неправильно настроены начертания.
Локальные шрифты
Правило @font-face src позволяет задать название локального шрифта, т.е. если у пользователя на компьютере уже установлен нужный шрифт, то будет использоваться именно он, при этом существенно увеличится скорость загрузки и отрисовки страницы.
Можно указать несколько названий:
Форматы шрифтов
Сегодня используются четыре формата, рассмотрим их подробнее:
TTF/OTF – работают в большинстве браузеров, кроме IE.
EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.
WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.
WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.
Как видно нет единого формата, который поддерживается всеми браузерами, поэтому нужно делать подключение нескольких файлов, браузер сам выберет подходящий формат. Рекомендуется подключать файлы шрифтов по приоритету:
- WOFF2 для современных браузеров.
- WOFF для браузеров, которые не поддерживают WOFF2.
- TTF для устаревших браузерах
- EOT для поддержки IE.
Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов onlinefontconverter.com или convertio.co.
Разные начертания шрифтов
Пример подключения шрифта «Crimson Text» в разных начертаниях: