What is the recommended way to use a different font?

[odinsride]

Coming from the webpacker/yarn method of adding @fontsource packages for fonts, that doesn't seem to work with this gem. For now, I've resorted to linking to the font externally from Google Fonts. Do I simply need to download the font into assets (and configure CSS accordingly) if I want to self-host it?

[dixpac]

@odinsride exactly. You should download fonts and place them inside the app/assets/fonts/ and hook the font with the tailwind css something like this

This engine already configures the inter-font so maybe this could help you:
https://github.com/rails/tailwindcss-rails/tree/main/app/assets/fonts
https://github.com/rails/tailwindcss-rails/blob/main/lib/install/tailwind.config.js#L12

Hope this helps 😄

[odinsride]

Thanks for clearing that up!

[dp6ai]

For anyone who comes back to this, the following worked for me:

• Add your font files under app/assets/fonts/xxxx.otf
• Create a new stylesheet app/assets/stylesheets/xxxx-font.css with
  @font-face { font-family: 'X Family Name; src: url('xxxx.otf') format('opentype'); }
• Add this to assets.rb
  Rails.application.config.assets.precompile += %w( xxxx-font.css )
• Add this to tailwind.config.js
  my-font: ['X Family Name', ...defaultTheme.fontFamily.sans],
• Use in your css
  <span class="my-fon">This should work!</span>

HTH