¿Usa fuentes personalizadas usando CSS?

He visto algunos sitios web nuevos que usan fuentes personalizadas en sus sitios (que no sean Arial, Tahoma, etc.).

Y admiten una buena cantidad de navegadores.

¿Cómo se hace eso? Al mismo tiempo, evita que las personas tengan acceso gratuito para descargar la fuente, si es posible.

Genéricamente, puede usar una fuente personalizada @font-faceen su CSS. Aquí hay un ejemplo muy básico:

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

Luego, trivialmente, para usar la fuente en un elemento específico:

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

( .classnamees tu selector).

Tenga en cuenta que ciertos formatos de fuente no funcionan en todos los navegadores; puede usar el generador de fontsquirrel.com para evitar demasiado esfuerzo de conversión.

Puede encontrar un buen conjunto de fuentes web gratuitas proporcionadas por Google Fonts (también tiene @font-facereglas CSS generadas automáticamente , por lo que no tiene que escribir las suyas propias).

mientras que también evita que las personas tengan acceso gratuito para descargar la fuente, si es posible

No, no es posible darle estilo a su texto con una fuente personalizada incrustada a través de CSS, mientras se impide que las personas lo descarguen. Debe usar imágenes, Flash o HTML5 Canvas , todo lo cual no es muy práctico.

¡Espero que haya ayudado!

Para asegurarse de que su fuente sea compatible con varios navegadores, asegúrese de usar esta sintaxis:

@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'); 
}

Tomado de aquí .

Tienes que descargar el archivo de fuente y cargarlo en tu CSS.

Fe Estoy usando la fuente Yanone Kaffeesatz en mi aplicación web.

Lo cargo y lo uso a través de

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

en mi hoja de estilo

Hoy en día hay cuatro formatos de contenedor de fuentes en uso en la web: EOT, TTF, WOFF,yWOFF2.

Desafortunadamente, a pesar de la amplia gama de opciones, no existe un único formato universal que funcione en todos los navegadores antiguos y nuevos:

• EOT es solo IE,
• TTF tiene soporte parcial de IE,
• WOFF disfruta del soporte más amplio pero no está disponible en algunos navegadores antiguos
• El soporte de WOFF 2.0 es un trabajo en progreso para muchos navegadores.

Si desea que su aplicación web tenga la misma fuente en todos los navegadores, puede proporcionar los 4 tipos de fuente en 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;
  }

Si no encuentra las fuentes que le gustan de Google.com/webfonts o fontsquirrel.com, siempre puede crear su propia fuente web con una fuente que haya creado.

aquí hay un buen tutorial: haga su propio kit de fuentes web

Aunque no estoy seguro de evitar que alguien descargue su fuente.

Espero que esto ayude,

También hay una herramienta interesante llamada CUFON . Hay una demostración de cómo usarlo en este blog. Es realmente simple e interesante. Además, no permite a las personas ctrl + c / ctrl + v el contenido generado.

Estoy trabajando en Win 8, use este código. Funciona para IE y FF, Opera, etc. Lo que entendí son: la fuente woff es ligera y común en las fuentes de Google.

Vaya aquí para convertir su fuente ttf a woff antes.

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

En primer lugar, no puede evitar que las personas descarguen fuentes, excepto si es suya y eso generalmente lleva meses. Y no tiene sentido evitar que las personas usen fuentes. Se pueden encontrar muchas fuentes que ves en sitios web en plataformas gratuitas como la que mencioné a continuación.

Pero si desea implementar una fuente en su sitio web, lea esto: hay una manera bastante simple y gratuita de implementar fuentes en su sitio web. Recomendaría las fuentes de Google porque es gratis y fácil de usar. Por ejemplo, usaré la fuente Bangers de Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Así es como se vería: HTML

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

CSS

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