Using custom fonts

[igross]

Hi guys, I want to use Lato font, but there is no Cyrillic version in Google fonts. Which folder on the server do I need to put the font in?

At the moment I have created a folder in uploads/custom/fonts and connected the font via custom.css, but I'm not sure that this is the right solution.

Sorry if such a question has already been asked. And sorry for my English 🙂

[opentype]

16 minutes ago, Stanislav Nikitin said:

At the moment I have created a folder in uploads/custom/fonts and connected the font via custom.css

Should be fine. 

[igross]

3 minutes ago, opentype said:

Should be fine. 

Maybe there is a better way?

[Tom S.]

6 hours ago, Stanislav Nikitin said:

Maybe there is a better way?

If it's working then it sounds fine. I would argue that the uploads folder is not the ideal place for it (from a picky point of view). Maybe create a new directory called assets or something. assets/fonts

 

[bfarber]

You should visit Customization > Themes in the AdminCP, click the dropdown next to your theme and go to Manage Resources. Upload the font here, and then take the replacement tag (which generates the URL) and use that in your custom.css.

Your solution is fine and will work, but the above method will benefit from using our storage handling system properly. i.e. if you move your theme resources to S3 for performance reasons, your font would be moved as well, and the CSS file would automatically update to reflect the new URL.

[sobrenome]

On 12/19/2018 at 1:29 PM, bfarber said:

You should visit Customization > Themes in the AdminCP, click the dropdown next to your theme and go to Manage Resources. Upload the font here, and then take the replacement tag (which generates the URL) and use that in your custom.css.

For those who want to self host google fonts, this article is very nice:

https://dev.to/kelli/how-to-self-host-google-fonts-on-your-own-server-d4i

[sobrenome]

On 12/19/2018 at 1:29 PM, bfarber said:

in your custom.css

@font-face on custom.css is not loading the custom face. I have also added to the custom.css the new body font-family:

/* roboto-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('{resource="roboto-v20-latin-300.woff2"}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('{resource="roboto-v20-latin-300.woff"}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('{resource="roboto-v20-latin-300italic.woff2"}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('{resource="roboto-v20-latin-300italic.woff"}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('{resource="roboto-v20-latin-regular.woff2"}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('{resource="roboto-v20-latin-regular.woff"}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('{resource="roboto-v20-latin-italic.woff2"}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('{resource="roboto-v20-latin-italic.woff"}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('{resource="roboto-v20-latin-700.woff2"}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('{resource="roboto-v20-latin-700.woff"}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
       url('{resource="roboto-v20-latin-700italic.woff2"}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('{resource="roboto-v20-latin-700italic.woff"}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

 

And the theme font was set to default.