Usando fontes personalizadas usando CSS?

Eu já vi alguns sites novos que usam fontes personalizadas em seus sites (além do Arial, Tahoma, etc.).

E eles suportam uma boa quantidade de navegadores.

Como é que alguém faz isso? Além disso, evita que as pessoas tenham acesso gratuito ao download da fonte, se possível.

Genericamente, você pode usar uma fonte personalizada usando @font-faceno seu CSS. Aqui está um exemplo muito básico:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Em seguida, trivialmente, use a fonte em um elemento específico:

.classname {
    font-family: 'YourFontName';
}

( .classnameé o seu seletor).

Observe que determinados formatos de fonte não funcionam em todos os navegadores; você pode usar o gerador de fontsquirrel.com para evitar muito esforço de conversão.

Você pode encontrar um bom conjunto de fontes da web gratuitas fornecidas pelo Google Fonts (também possui @font-faceregras CSS geradas automaticamente , para que você não precise criar suas próprias).

além de impedir que as pessoas tenham acesso gratuito ao download da fonte, se possível

Não, não é possível estilizar seu texto com uma fonte personalizada incorporada via CSS, enquanto impede as pessoas de fazer o download. Você precisa usar imagens, Flash ou o Canvas HTML5 , os quais não são muito práticos.

Espero que tenha ajudado!

Para garantir que sua fonte seja compatível com vários navegadores, use esta sintaxe:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Retirado daqui .

Você precisa baixar o arquivo da fonte e carregá-lo no seu CSS.

Estou usando a fonte Yanone Kaffeesatz no meu aplicativo da Web.

Carrego e uso-o via

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

na minha folha de estilo.

Hoje existem quatro formatos de contêiner de fontes em uso na Web: EOT, TTF, WOFF,eWOFF2.

Infelizmente, apesar da grande variedade de opções, não existe um único formato universal que funcione em todos os navegadores antigos e novos:

• EOT é apenas IE,
• TTF tem suporte parcial ao IE,
• O WOFF possui o suporte mais amplo, mas não está disponível em alguns navegadores mais antigos
• O suporte ao WOFF 2.0 é um trabalho em andamento para muitos navegadores.

Se você deseja que seu aplicativo da Web tenha a mesma fonte em todos os navegadores, forneça o tipo de fonte 4 em CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

Se você não encontrar as fontes de que gosta no Google.com/webfonts ou fontsquirrel.com, sempre poderá criar sua própria fonte da web com uma fonte criada por você.

Aqui está um bom tutorial: Crie seu próprio kit de fontes da web

Embora eu não tenha certeza de impedir que alguém baixe sua fonte.

Espero que isto ajude,

há também uma ferramenta interessante chamada CUFON . Há uma demonstração de como usá-lo neste blog. É realmente simples e interessante. Além disso, ele não permite que as pessoas ctrl + c / ctrl + v do conteúdo gerado.

Estou trabalhando no Win 8, use este código. Funciona para IE e FF, Opera, etc. O que entendi são: a fonte woff é leve e comum nas fontes do Google.

Vá aqui para converter sua fonte ttf para woff antes.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

Primeiro de tudo, você não pode impedir as pessoas de baixar fontes, exceto se for sua e isso geralmente leva meses. E não faz sentido impedir que as pessoas usem fontes. Muitas fontes que você vê nos sites podem ser encontradas em plataformas gratuitas, como a que mencionei abaixo.

Mas se você deseja implementar uma fonte no seu site, leia isto: Existe uma maneira bastante simples e gratuita de implementar fontes no seu site. Eu recomendaria fontes do Google porque é gratuito e fácil de usar. Por exemplo, usarei a fonte Bangers do Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) É assim que parece: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}