Estou usando o create-react-app e prefiro não eject
.
Não está claro para onde as fontes importadas via @ font-face e carregadas localmente devem ir.
Ou seja, estou carregando
@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}
Alguma sugestão?
- EDITAR
Incluindo a essência a que Dan se refere em sua resposta
➜ 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');
}
%PUBLIC_URL%
não pode funcionar (e é desnecessário) em um arquivo CSS. Além disso, conforme descrito no guia, você deve usar importações JS em quase todos os casos, não na pasta pública.Respostas:
Existem duas opções:
Usando importações
Esta é a opção sugerida. Ele garante que suas fontes passem pelo pipeline de construção, obtenham hashes durante a compilação, para que o cache do navegador funcione corretamente e que você obtenha erros de compilação se os arquivos estiverem ausentes.
Conforme descrito em “Adicionando imagens, fontes e arquivos” , é necessário ter um arquivo CSS importado do JS. Por exemplo, por padrão,
src/index.js
importaçõessrc/index.css
:Um arquivo CSS como esse passa pelo pipeline de construção e pode fazer referência a fontes e imagens. Por exemplo, se você inserir uma fonte
src/fonts/MyFont.woff
,index.css
poderá incluir isso:Observe como estamos usando um caminho relativo começando com
./
. Essa é uma notação especial que ajuda o pipeline de construção (desenvolvido pela Webpack) a descobrir esse arquivo.Normalmente isso deve ser suficiente.
Usando
public
pastaSe, por algum motivo, você preferir não usar o pipeline de compilação, e fazê-lo da “maneira clássica”, você pode usar a
public
pasta e colocar suas fontes lá.A desvantagem dessa abordagem é que os arquivos não recebem hashes quando você compila para produção, portanto, é necessário atualizar os nomes deles sempre que os alterar, ou os navegadores armazenarão em cache as versões antigas.
Se você quiser fazer dessa maneira, coloque as fontes em algum lugar da
public
pasta, por exemplo, empublic/fonts/MyFont.woff
. Se você seguir essa abordagem, também deverá colocar os arquivos CSS napublic
pasta e não importá-los do JS, pois a mistura dessas abordagens será muito confusa. Então, se você ainda quiser fazer isso, terá um arquivo comopublic/index.css
. Você precisaria adicionar manualmente<link>
a esta folha de estilo empublic/index.html
:E dentro dele, você usaria a notação CSS regular:
Observe como estou usando
fonts/MyFont.woff
o caminho. Isso ocorre porqueindex.css
está napublic
pasta para que seja veiculado a partir do caminho público (geralmente é a raiz do servidor, mas se você implantar no GitHub Pages e definir seuhomepage
campo comohttp://myuser.github.io/myproject
, ele será veiculado/myproject
). No entanto,fonts
também estão napublic
pasta, então eles serão exibidosfonts
relativamente (umhttp://mywebsite.com/fonts
ou outrohttp://myuser.github.io/myproject/fonts
). Portanto, usamos o caminho relativo.Observe que, como estamos evitando o pipeline de compilação neste exemplo, ele não verifica se o arquivo realmente existe. É por isso que eu não recomendo essa abordagem. Outro problema é que nosso
index.css
arquivo não é compactado e não possui hash. Portanto, será mais lento para os usuários finais, e você corre o risco de os navegadores colocarem em cache as versões antigas do arquivo.Que maneira de usar?
Siga o primeiro método ("Usando importações"). Eu apenas descrevi o segundo, já que foi isso que você tentou fazer (a julgar pelo seu comentário), mas ele tem muitos problemas e só deve ser o último recurso quando você está contornando algum problema.
fonte
ttf
fonte, você deve fornecer, emtruetype
vez dettf
como parâmetro, oformat
* .otf
precisará colocaropentype
.Aqui estão algumas maneiras de fazer isso:
1. Importando fonte
Por exemplo, para usar o Roboto, instale o pacote usando
ou
No index.js:
Existem pacotes npm para muitas fontes de código aberto e a maioria das fontes do Google. Você pode ver todas as fontes aqui . Todos os pacotes são desse projeto .
2. Para fontes hospedadas por terceiros
Por exemplo, fontes do Google, você pode acessar fonts.google.com, onde pode encontrar links que podem ser colocados no seu
public/index.html
Vai ser como
ou
3. Baixando a fonte e adicionando-a ao seu código fonte.
Faça o download da fonte. Por exemplo, para fontes do google, você pode ir para fonts.google.com . Clique no botão de download para baixar a fonte.
Mova a fonte para o
fonts
diretório em seusrc
diretórioAgora
App.css
, adicione estePara o
ttf
formato, você precisa mencionarformat('truetype')
. Parawoff
,format('woff')
Agora você pode usar a fonte nas classes.
4. Usando o pacote web-font-loader
Instale o pacote usando
ou
Em
src/index.js
, você pode importar isso e especificar as fontes necessáriasfonte
fonts
pasta em baixosrc
, mas empublic
vez disso? Eu tentei, mas parece que não é permitido ...For ttf format, you have to mention format('truetype'). For woff, format('woff')
fez isso por mim! obrigado!Ele será aberto assim:
4, Copie e cole esse código no seu style.css e simplesmente comece a usar essa fonte assim:
Resultado:
fonte
Você pode usar o módulo WebFont , que simplifica bastante o processo.
fonte
Eu estava cometendo erros assim.
Funciona corretamente dessa maneira
fonte
Passei a manhã inteira resolvendo um problema semelhante depois de ter abordado essa questão da pilha. Usei a primeira solução de Dan na resposta acima como ponto de partida.
Problema
Eu tenho um ambiente de desenvolvimento (esta na minha máquina local), preparação e produção. Meus ambientes de preparação e produção vivem no mesmo servidor.
O aplicativo é implantado na preparação
acmeserver/~staging/note-taking-app
e a versão de produção fica emacmeserver/note-taking-app
(culpa de TI).Todos os arquivos de mídia, como fontes, estavam carregando perfeitamente no dev (ou seja,
react-scripts start
).No entanto, quando eu criei e enviei compilações de preparação e produção, enquanto o
.css
e.js
arquivos estavam carregando corretamente, as fontes não estavam. O.css
arquivo compilado parecia ter um caminho correto, mas a solicitação http do navegador estava recebendo um caminho muito errado (mostrado abaixo).O
main.fc70b10f.chunk.css
arquivo compilado :A solicitação http do navegador é mostrada abaixo. Observe como ele está sendo adicionado
/static/css/
quando o arquivo de fonte está localizado/static/media/
, além de duplicar a pasta de destino. Eu descartei a configuração do servidor como a culpada.Também
Referer
está parcialmente em falta.O
package.json
arquivo tinha ahomepage
propriedade definida como./note-taking-app
. Isso estava causando o problema.Solução
Isso foi por muito tempo - mas a solução é:
PUBLIC_URL
variável env dependendo do ambientehomepage
propriedade dopackage.json
arquivoAbaixo está o meu
.env-cmdrc
arquivo. Uso.env-cmdrc
mais do que o normal.env
porque mantém tudo junto em um arquivo.O roteamento via também
react-router-dom
funciona bem - basta usar aPUBLIC_URL
variável env comobasename
propriedade.A configuração do servidor está definida para rotear todas as solicitações para o
./index.html
arquivo.Finalmente, eis a
main.fc70b10f.chunk.css
aparência do arquivo compilado após a implementação das alterações discutidas.Material de leitura
https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing
https://create-react-app.dev/docs/advanced-configuration
PUBLIC_URL
variável de ambientefonte