Fonts (Raleway & Lato) do not support UTF characters

[BoardCZ]

Hello, used font does not support UTF.

[Roundaround]

Thanks for reporting! @BoardCZ a good workaround for this would be to add your own css file, import a font that works for you, and overwrite the appropriate tags in your css to use your custom font. Your custom css file might look something like this:

@font-face {
  font-family: "My Custom Font";
  src: url("./fonts/My-Custom-Font.woff2") format("woff2"),
       url("./fonts/My-Custom-Font.woff") format("woff");
}

body, h1, h2, h3, h4, h5, h6 {
  font-family: 'My Custom Font', sans-serif;
}

You can find where we define the default fonts in app.scss:

1. Majority of the page (body tag): https://github.com/bastienwirtz/homer/blob/main/src/assets/app.scss#L22
2. Headers (h1-h6 tags): https://github.com/bastienwirtz/homer/blob/main/src/assets/app.scss#L74

I'll keep an eye out for alternative fonts that we can use. Most of the time fonts are designed for a single specific language so there may not be a one-size-fits-all solution here.

[VincenzoKoestler]

@Roundaround Hey Evan! I am kinda stuck with this. I have been trying to get this done and stumbled over your comment. My custom.css get loaded properly and the changes look like this:

@font-face {
  font-family: 'Azo';
  font-style: normal;
  font-weight: 900;
  src: url('./fonts/AzoSans-Black.ttf') format('truetype'),
  src: local(''),
       url('./fonts/AzoSans-Black.eot?#iefix') format('embedded-opentype'), 
       url('./fonts/AzoSans-Black.woff2') format('woff2'),
       url('./fonts/AzoSans-Black.woff') format('woff'), 
   }

body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: "Azo", sans-serif!important;
  font-weight:700;
}

However, my fonts simply wont get imported as resources and the browser just falls back to the fallback fonts. The fonds are in the proper locations (/assets/fonts)..out of ideas...maybe you have got one? :)

[Roundaround]

It seems to work on my machine, albeit with a few tweaks to your CSS (some formatting issues make it invalid). This is what I used:

@font-face {
  font-family: "Azo";
  src: url("./fonts/AzoSans-Black.ttf") format("truetype");
  src: url("./fonts/AzoSans-Black.eot?#iefix") format("embedded-opentype"), 
       url("./fonts/AzoSans-Black.woff2") format("woff2"),
       url("./fonts/AzoSans-Black.woff") format("woff");
}

body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: "Azo", sans-serif;
  font-weight: 700;
}

The most important change was that I changed the comma at the end of the two src properties to semicolons to properly terminate the lines. Otherwise I just did some various cleanup because there was a lot of junk that wasn't necessary (i.e. font-style and font-weight in the font-face definition, the local('') src, the !important modifier).

Let me know if that works for you!

[S474N]

I think, that best way is native support UTF.