Search code examples
csslaravelfontswebfonts

Adding custom font to laravel Applications

So, I am confused by this:

@font-face {
  font-family:'rift';
  src: url('../vendor/fonts/Fort Foundry - Rift-Bold.otf') format('otf');
  font-style: 'normal';
  font-weight: '700';
}

It lives in public/vendor/fonts/ and whats confusing is that unless I physically install the font - the font doesn't render properly.

I thought the whole aspect of using custom fonts was that the end user did not have to have them installed on their machine, that it should just work. Am I missing something when it comes to using custom fonts in css?

I get no errors in the console with or with out the font installed. Is there a way to verify that it is actually working? Or is that why we have things like fallbacks?

.site-name{
  color: #fff;
  font-size: 22px;
  font-family: rift, sans-serif; // Fallbacks
}

Can some one explain the concept of using custom fonts and if I am setting it up properly in css? From a Laravel perspective.

Solution

  • You can host the font files on your server, to make use of a custom font on your site. Visitors are not required to have the font installed on their machine.

    Make sure to choose a file name without spaces and special chars. You'll need to offer different formats of the font (like .eot, .woff2,...) to make it work across the different browsers and operating systems. Otherwise, the fallback font (in your case sans-serif) will be used.

    Check out the article Using @font-face on CSS-Tricks. This is how your CSS could look like:

    @font-face {
  font-family: 'rift';
  font-style: 'normal';
  font-weight: '700';
  src: url('../vendor/fonts/fort-foundry.eot'); /* IE9 Compat Modes */
  src: url('../vendor/fonts/fort-foundry.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../vendor/fonts/fort-foundry.woff2') format('woff2'), /* Super Modern Browsers */
       url('../vendor/fonts/fort-foundry.woff') format('woff'), /* Pretty Modern Browsers */
       url('../vendor/fonts/fort-foundry.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../vendor/fonts/fort-foundry.svg#FortFoundry') format('svg'); /* Legacy iOS */
}

    Troubleshooting

    Visit your site and open the Developer Tools. Go to the tab Console. Reload the page and look out for errors to make sure that the path to your font files is correct. If it's not, there will be an error 404 visible in the logs.