mmi85 wrote:I just "bought" some fonts (they were free, but i have the licence to use them on my website).
So now, how do I add fonts?
What format are the fonts? Do you have the fonts in multiple variations (eg. normal, bold, italic etc)? It's not super-easy to add custom fonts to a website. Essentially it's something like this:
1. Upload the fonts to your web server.
2. To disable Google fonts in X3, go to Settings > Style > Fonts, and select [NONE].
3. Load the font with from CSS (In X3, Settings > Custom > Custom CSS).
In the above, if you want to use BOLD, ITALIC etc, you would need font files for each specific style also. Fonts are added by using CSS @font-face.
4. Then you need to define the styles for html elements to use the font. This is also done in Settings > Custom > Custom CSS, and a basic minimal example would be:
body {
font-family: 'myCustomFont', Arial, sans-serif;
font-weight: normal;
}
h1 {
font-family: 'myCustomFont-bold', Arial, sans-serif;
font-weight: bold;
}
There is a tutorial in the link below. As you may find, it's not a straight-forward task unless you have some web designer experience.
https://www.pagecloud.com/blog/how-to-a ... ny-website
mmi85 wrote:And, can someone explain me, what these means (Settings, Style, Font):
Roboto+Condensed:300italic,700italic,300,400,700|logo:700|header:700|paragraph:300|subheader:300|sidebar:uppercase,300|menu:300|topbar:400,uppercase,xlarge|sidebar:uppercase,xlarge
This is an internal Google-fonts styling format used in X3, and probably something we will move away from in the future as it is not useful or logical for our users. If you use your own custom font or a normal system font, you would NOT use the above anyway, but basic custom CSS styling (if required).
To explain the above in it's most basic (only when using Google fonts): The very first string you see there is the loaded font from Google, and is identical to their own url format when assigning fonts from
https://fonts.google.com/. It identifies what variations of the font to load, and in the above you will see 300italic, 700italic, 300, 400 and 700 (boldness). You can also load a secondary font different from the first, in which case it will get assigned to HEADERS (h1, h2 etc). Thereafter, you will see items like |logo, |header and |sidebar etc, where you can moderate the boldness, size, case of the font for that specific element.
Considering the above is not easy to work with, I would almost recommend using standard CSS to customize font style for specific elements on your X3 page. Customizing fonts and font-styles is nevertheless an advanced procedure, unless you have some experience in CSS/html.