How to import a font into an Ember project

Question

I am creating a website using the MEEN Stack (Mongo, Ember, Express, Node). And right now, I am trying to import the Lato font family into my project as that will be the font of everything on the website. I seem to be having trouble with this and can't find any resources online that cover this. Any ideas on how to do this? I've downloaded the Lato font and put the files in my public/assets/fonts folder and am still having problems. I am also using foundation if that helps.

I have this in my app.scss file:

/* Webfont: Lato-SemiboldItalic */@font-face {
    font-family: 'LatoWebSemibold';
    src: url('fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-SemiboldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

nav {
    font-family: "LatoWebSemibold";
    background-color: none;
    width:150px;
    text-align:left;
    font-size:1em;
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 20 30 20;
    float:left;
}

Looks good to me... Have you checked in the distribution directory to see if the fonts make it in there? I am including custom fonts in an Ember app (older version using Grunt) and doing it the same way as you (referencing `fonts/` in the url) — Steve H., Mar 22 '16 at 20:07
Also, check the network tab in the chrome console and see if it is making requests for the CSS files. Might give you a hint. — Steve H., Mar 22 '16 at 20:08
@SteveH. I think part of the problem might be that when I downloaded the Lato font from their website, it only came with .ttf files. Where would I get the .eot and .woff files? Do you know? — , Mar 22 '16 at 20:15
No, I think there are online converts from ttf to woff... I use Google fonts, and bootstrap Glyphicons, which come with the woff files. — Steve H., Mar 22 '16 at 20:17
You could try https://www.google.com/fonts/#ReviewPlace:refine/Collection:Lato — Steve H., Mar 22 '16 at 20:19
protip: make your life, and your user's lives, easier and stop using all the formats we used to need back when webfonts were kind of weird and uncertain. It's 2016, [just use WOFF](http://stackoverflow.com/a/36110385/740553) — Mike 'Pomax' Kamermans, Mar 23 '16 at 02:02

score 0 · Answer 1 · answered Jan 27 '20 at 14:39

0

I think your missing '/assets/' in the url

below is my working example

@font-face {
  font-family: 'Mytupi-Bold';
  src: url(/assets/fonts/mytupibold.ttf) format('truetype');
}

answered Jan 27 '20 at 14:39

Conor

426
7
22

Darren Hall · Answer 2 · 2021-02-11T12:51:52.130

I was trying to import a local font file into my ember addon.

Sheriffderek posted a nice mixin here but I kept seeing 404 errors.

I eventually got it working by putting the name of the app at the beginning of the font URL.

$font-url: '/<app/addon-name>/fonts';
 
@mixin font-face($name) {
@font-face {
  font-family: $name;
  src: url("#{$font-url}/#{$name}.woff2") format("woff2"),
       url("#{$font-url}/#{$name}.woff") format("woff");
}


@include font-face('font-name-500');

body {
  font-family: 'font-name-500';
}

How to import a font into an Ember project

2 Answers2