¿Utiliza fonts personalizadas usando CSS?

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

Y admiten una buena cantidad de navegadores.

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

Genéricamente, puede usar una fuente personalizada usando @font-face en 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*/ } 

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

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

( .classname es 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 demasiada conversión de esfuerzo.

Puede encontrar un buen conjunto de fonts web gratuitas proporcionadas por Google Fonts (también tiene reglas autogeneradas CSS @font-face , para que no tenga que escribir las suyas propias).

a la vez que evita que las personas tengan acceso libre para descargar la fuente, si es posible

No, no es posible darle un estilo a tu texto con una fuente personalizada incrustada mediante CSS, a la vez que evitas que la gente la descargue. Necesita usar imágenes, Flash o el canvas HTML5 , todos los cuales no son muy prácticos.

Espero que haya ayudado!

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

 @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 estilos

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

aquí hay un buen tutorial: crea tu propio juego de fonts web de fonts de fonts

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 muy simple e interesante. Además, no permite que 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í es que la fuente woff es liviana y común en las fonts de Google.

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

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

Actualmente, hay cuatro formatos de contenedor de fonts en uso en la web: EOT, TTF, WOFF, y WOFF2.

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

  • EOT es solo IE,
  • TTF tiene soporte parcial de IE,
  • WOFF goza del mayor soporte pero no está disponible en algunos navegadores más antiguos
  • El soporte 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, es posible que desee 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; }