otf - fuentes para css
¿Cómo agregar fuentes para crear proyectos basados en aplicaciones? (6)
Estoy usando
create-react-app
y prefiero no
eject
.
No está claro dónde deberían ir las fuentes importadas a través de @ font-face y cargadas localmente.
A saber, estoy cargando
@font-face {
font-family: ''Myriad Pro Regular'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Regular''), url(''MYRIADPRO-REGULAR.woff'') format(''woff'');
}
¿Alguna sugerencia?
- EDITAR
Incluyendo la esencia a la que Dan se refiere en su respuesta
➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler staff 61500 Mar 17 2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler staff 66024 Mar 17 2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler staff 66108 Mar 17 2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler staff 60044 Mar 17 2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler staff 64656 Mar 17 2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler staff 61848 Mar 17 2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler staff 62448 Mar 17 2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler staff 66232 Mar 17 2014 MYRIADPRO-SEMIBOLDIT.woff
➜ Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
padding: 15px;
}
@font-face {
font-family: ''Myriad Pro Regular'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Regular''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff'') format(''woff'');
}
@font-face {
font-family: ''Myriad Pro Condensed'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Condensed''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff'') format(''woff'');
}
@font-face {
font-family: ''Myriad Pro Semibold Italic'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Semibold Italic''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff'') format(''woff'');
}
@font-face {
font-family: ''Myriad Pro Semibold'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Semibold''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff'') format(''woff'');
}
@font-face {
font-family: ''Myriad Pro Condensed Italic'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Condensed Italic''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff'') format(''woff'');
}
@font-face {
font-family: ''Myriad Pro Bold Italic'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Bold Italic''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff'') format(''woff'');
}
@font-face {
font-family: ''Myriad Pro Bold Condensed Italic'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Bold Condensed Italic''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff'') format(''woff'');
}
@font-face {
font-family: ''Myriad Pro Bold Condensed'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Bold Condensed''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff'') format(''woff'');
}
@font-face {
font-family: ''Myriad Pro Bold'';
font-style: normal;
font-weight: normal;
src: local(''Myriad Pro Bold''), url(''%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff'') format(''woff'');
}
- Vaya a Google Fonts https://fonts.google.com/
- Seleccione su fuente como se muestra en la imagen a continuación:
- Copie y pegue esa URL en la nueva pestaña, obtendrá el código CSS para agregar esa fuente. En este caso si vas a
Se abrirá así:
4, copie y pegue ese código en su style.css y simplemente comience a usar esa fuente de esta manera:
<Typography
variant="h1"
gutterBottom
style={{ fontFamily: "Spicy Rice", color: "pink" }}
>
React Rock
</Typography>
Resultado:
Aquí hay algunas formas de hacer esto:
1. Importando fuente
Por ejemplo, para usar Roboto, instale el paquete usando
yarn add typeface-roboto
o
npm install typeface-roboto --save
En index.js:
import "typeface-roboto";
Hay paquetes npm para muchas fuentes de código abierto y la mayoría de las fuentes de Google. Puedes ver todas las fuentes here . Todos los paquetes son de ese project .
2. Para fuentes alojadas por terceros
Por ejemplo, las fuentes de Google, puede ir a
fonts.google.com
donde puede encontrar enlaces que puede poner en su
public/index.html
Será como
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
o
<style>
@import url(''https://fonts.googleapis.com/css?family=Montserrat'');
</style>
3. Usando el paquete web-font-loader
Instalar paquete usando
yarn add webfontloader
o
npm install webfontloader --save
En
src/index.js
, puede importar esto y especificar las fuentes necesarias
import WebFont from ''webfontloader'';
WebFont.load({
google: {
families: [''Titillium Web:300,400,700'', ''sans-serif'']
}
});
Estaba cometiendo errores como este.
@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";
Funciona correctamente de esta manera.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
Hay dos opciones:
Usando Importaciones
Esta es la opción sugerida. Asegura que sus fuentes pasen por el canal de compilación, obtengan hashes durante la compilación para que el almacenamiento en caché del navegador funcione correctamente y que obtenga errores de compilación si faltan los archivos.
Como se
describe en "Agregar imágenes, fuentes y archivos"
, debe tener un archivo CSS importado de JS.
Por ejemplo, por defecto
src/index.js
importa
src/index.css
:
import ''./index.css'';
Un archivo CSS como este pasa por la canalización de compilación y puede hacer referencia a fuentes e imágenes.
Por ejemplo, si coloca una fuente en
src/fonts/MyFont.woff
, su
index.css
podría incluir esto:
@font-face {
font-family: ''MyFont'';
src: local(''MyFont''), url(./fonts/MyFont.woff) format(''woff'');
}
Observe cómo estamos usando una ruta relativa que comienza con
./
.
Esta es una notación especial que ayuda a la canalización de compilación (desarrollada por Webpack) a descubrir este archivo.
Normalmente esto debería ser suficiente.
Usar
public
carpeta
public
Si por alguna razón prefiere
no
usar la canalización de compilación y, en su lugar, lo hace de la "forma clásica", puede
usar la carpeta
public
y colocar sus fuentes allí.
La desventaja de este enfoque es que los archivos no obtienen hashes cuando compila para la producción, por lo que tendrá que actualizar sus nombres cada vez que los cambie, o los navegadores guardarán en caché las versiones anteriores.
Si desea hacerlo de esta manera, coloque las fuentes en algún lugar de la carpeta
public
, por ejemplo, en
public/fonts/MyFont.woff
.
Si sigue este enfoque, también debe colocar los archivos CSS en
public
carpeta
public
y
no
importarlos desde JS porque mezclar estos enfoques será muy confuso.
Por lo tanto, si aún desea hacerlo, tendría un archivo como
public/index.css
.
Debería agregar manualmente
<link>
a esta hoja de estilo desde
public/index.html
:
<link rel="stylesheet" href="%PUBLIC_URL%/index.css">
Y dentro de él, usarías la notación CSS normal:
@font-face {
font-family: ''MyFont'';
src: local(''MyFont''), url(fonts/MyFont.woff) format(''woff'');
}
Observe cómo estoy usando
fonts/MyFont.woff
como la ruta.
Esto se debe a que
index.css
está en la carpeta
public
por lo que se servirá desde la ruta pública (generalmente es la raíz del servidor, pero si implementa en GitHub Pages y configura el campo de su
homepage
en
http://myuser.github.io/myproject
, se servirá desde
/myproject
).
Sin embargo, las
fonts
también están en la carpeta
public
, por lo que se servirán desde
fonts
relativamente (ya sea
http://mywebsite.com/fonts
o
http://myuser.github.io/myproject/fonts
).
Por lo tanto, usamos la ruta relativa.
Tenga en cuenta que dado que estamos evitando la canalización de compilación en este ejemplo, no verifica que el archivo realmente exista.
Por eso no recomiendo este enfoque.
Otro problema es que nuestro archivo
index.css
no se minimiza y no obtiene un hash.
Por lo tanto, será más lento para los usuarios finales y correrá el riesgo de que los navegadores almacenen en caché las versiones antiguas del archivo.
¿Qué manera de usar?
Vaya con el primer método ("Uso de importaciones"). Solo describí el segundo ya que eso es lo que intentaste hacer (a juzgar por tu comentario), pero tiene muchos problemas y solo debería ser el último recurso cuando estés trabajando en algún problema.
Pasé toda la mañana resolviendo un problema similar después de haber aterrizado en esta pregunta de la pila. Usé la primera solución de Dan en la respuesta anterior como punto de partida.
Problema
Tengo un entorno de desarrollo, montaje y producción (esto está en mi máquina local). Mis entornos de montaje y producción viven en el mismo servidor.
La aplicación se implementa en la puesta en escena a través de
acmeserver/~staging/note-taking-app
y la versión de producción vive en
acmeserver/note-taking-app
(culpar a TI).
Todos los archivos multimedia, como las fuentes, se cargaban perfectamente bien en dev (es decir,
react-scripts start
).
Sin embargo, cuando creé y cargué compilaciones de montaje y producción, mientras que los archivos
.css
y
.js
se cargaban correctamente, las fuentes no.
El archivo
.css
compilado parecía tener una ruta correcta, pero la solicitud http del navegador estaba obteniendo una ruta muy incorrecta (que se muestra a continuación).
El archivo
main.fc70b10f.chunk.css
compilado:
@font-face { font-family: SairaStencilOne-Regular; src: url(note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) ("truetype"); }
La solicitud http del navegador se muestra a continuación.
Tenga en cuenta cómo se agrega
/static/css/
cuando el archivo de fuente solo vive en
/static/media/
, así como también se duplica la carpeta de destino.
Descarté que la configuración del servidor sea la culpable.
El
Referer
es parcialmente culpable.
GET /~staging/note-taking-app/static/css/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf HTTP/1.1 Host: acmeserver Origin: http://acmeserver Referer: http://acmeserver/~staging/note-taking-app/static/css/main.fc70b10f.chunk.css
El archivo
package.json
tenía la propiedad de
homepage
establecida en
./note-taking-app
.
Esto estaba causando el problema.
{ "name": "note-taking-app", "version": "0.1.0", "private": true, "homepage": "./note-taking-app", "scripts": { "start": "env-cmd -e development react-scripts start", "build": "react-scripts build", "build:staging": "env-cmd -e staging npm run build", "build:production": "env-cmd -e production npm run build", "test": "react-scripts test", "eject": "react-scripts eject" } //... }
Solución
Eso fue largo aliento, pero la solución es:
-
cambiar la variable env de
PUBLIC_URLsegún el entorno -
eliminar la propiedad de la
homepagedel archivopackage.json
A continuación se muestra mi archivo
.env-cmdrc
.
Utilizo
.env-cmdrc
sobre
.env-cmdrc
normal porque mantiene todo junto en un solo archivo.
{ "development": { "PUBLIC_URL": "", "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api" }, "staging": { "PUBLIC_URL": "/~staging/note-taking-app", "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api" }, "production": { "PUBLIC_URL": "/note-taking-app", "REACT_APP_API": "http://acmeserver/note-taking-app/api" } }
El enrutamiento a través de
react-router-dom
funciona bien: simplemente use la variable env de
PUBLIC_URL
como la propiedad
basename
.
import React from "react"; import { BrowserRouter } from "react-router-dom"; const createRouter = RootComponent => ( <BrowserRouter basename={process.env.PUBLIC_URL}> <RootComponent /> </BrowserRouter> ); export { createRouter };
La configuración del servidor está configurada para enrutar todas las solicitudes al archivo
./index.html
.
Finalmente, así es como se ve el archivo compilado
main.fc70b10f.chunk.css
después de implementar los cambios discutidos.
@font-face { font-family: SairaStencilOne-Regular; src: url(/~staging/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) format("truetype"); }
Material de lectura
-
https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing
-
https://create-react-app.dev/docs/advanced-configuration
-
esto explica la variable de entorno
PUBLIC_URLLa aplicación Create React asume que su aplicación está alojada en la raíz del servidor web de servicio o en una ruta secundaria como se especifica en package.json (página de inicio). Normalmente, la aplicación Create React ignora el nombre de host. Puede usar esta variable para forzar que los activos sean referenciados textualmente a la url que proporcione (nombre de host incluido). Esto puede ser particularmente útil cuando se utiliza un CDN para alojar su aplicación.
-
esto explica la variable de entorno
Puede usar el módulo WebFont , que simplifica enormemente el proceso.
render(){
webfont.load({
custom: {
families: [''MyFont''],
urls: [''/fonts/MyFont.woff'']
}
});
return (
<div style={your style} >
your text!
</div>
);
}