[RUBY] [Rails 5.x] Comment introduire des polices gratuites

Comment introduire des polices gratuites dans Rails

Je voulais introduire des polices gratuites dans mon propre portfolio, je l'ai donc présenté en référence à l'article Qiita. Il y a un sentiment de renouveau maintenant, mais ... un mémorandum et J'ai créé un article dans l'espoir qu'il sera utile pour les débutants.

Environnement de l'écrivain ・ Rubis 2.5.3 ・ Rails 5.2.2

1 Téléchargez le fichier de police gratuit
2 Placez le fichier de police sous app / assets / fonts
(nom de l'application)/app/assets/fonts

Mettez un fichier de police comme hogehoge.ttf (ou hoge.otf) dans le répertoire des polices. Dans mon cas, je n'avais pas le répertoire des polices, donc je l'ai créé avec mkdir sous assets.

3 Décrit dans le fichier SCSS

Vers SCSS,

custom.scss


@font-face {
  font-family: 'hoge'; # font-le nom de famille est décidé comme il convient
  src: font-url('hogehoge.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Écrivez comme ça. Vous pouvez l'écrire n'importe où dans le fichier. Et

custom.scss


body {  
  font-family: hoge;
}

Le nom de la famille de polices de plus tôt Décrivez-le dans le corps et appliquez-le à l'ensemble.

4 Terminé!

Je pense que vous pouvez appliquer des polices gratuites avec cette procédure. C'était étonnamment facile. S'il n'est pas reflété, essayez de redémarrer le serveur comme il convient!

5 Article de référence

[Pour les débutants] Comment ajouter des polices personnalisées aux applications Rails

Recommended Posts

[Rails 5.x] Comment introduire des polices gratuites
Jusqu'à l'introduction des polices dans Rails
Comment installer jQuery dans Rails 6
Comment écrire des rails
Présentation de Vue.js à Rails
Comment désinstaller Rails
[rails] Comment publier des images
[Rails] Comment utiliser enum
[Rails] Comment utiliser enum
Comment lire les itinéraires des rails
Comment terminer le serveur de rails
Comment écrire des graines de Rails
[Rails] Comment utiliser la validation
[Rails] Comment désactiver les turbolinks
[Rails] Comment utiliser authenticate_user!
[Rails] Comment mettre en œuvre le scraping
[Rails] Comment faire des graines
Comment écrire le routage Rails
[Rails] Comment installer simple_calendar
[Rails] Comment installer reCAPTCHA
[Rails] Comment utiliser Scope
[Avec des astuces de retour] Comment présenter React aux rails les plus simples
[Rails] Comment utiliser la "devise" des gemmes
[Rails] Comment utiliser l'appareil (Remarque)
[Rails] Comment utiliser les messages flash
[rails] Comment afficher les informations de base de données
[Rails] Comment empêcher la transition d'écran
Comment déployer Bootstrap sur Rails
[Rails] Comment accélérer la composition de docker
[Rails] Comment ajouter de nouvelles pages
[Rails] Comment écrire la gestion des exceptions?
[Rails] Comment installer ImageMagick (RMajick)
[Rails] Comment utiliser Active Storage
[Rails] Comment mettre en œuvre le classement par étoiles
[Introduction aux rails] Comment utiliser le rendu
Comment installer Swiper in Rails
[Rails] Comment introduire le kaminari avec Slim et changer le design
Comment implémenter la fonctionnalité de recherche dans Rails
Comment changer le nom de l'application dans les rails
[Rails] Comment convertir ERB en Haml
Comment insérer une vidéo dans Rails
[Rails] Comment utiliser ActiveRecord :: Bitemporal (BiTemporalDataModel)
[Rails] Comment utiliser la méthode de la carte
[Rails] Comment afficher les messages d'erreur individuellement
Comment utiliser MySQL dans le didacticiel Rails
Comment résoudre les erreurs qui se produisent lors de l'installation de Rails 5.1.3