Search…

X3 Photo Gallery Support Forums

Search…
 
mmi85
Topic Author
Posts: 5
Joined: 12 Aug 2019, 00:59

Adding fonts

13 Aug 2019, 09:04

Hi there

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?

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

Thanks a lot
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Adding fonts

13 Aug 2019, 22:23

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:
Code
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.
 
mmi85
Topic Author
Posts: 5
Joined: 12 Aug 2019, 00:59

Re: Adding fonts

14 Aug 2019, 09:16

Hi mjau-mjau

Thanks for your answer.

Which elements are all applied in the X3? Do you have a list with all elements and where they are applied? That is, which elements were used for the title of the website, for the menu etc..
Or do I have to try it?

Thank you and best wishes
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Adding fonts

14 Aug 2019, 22:52

mmi85 wrote:Which elements are all applied in the X3? Do you have a list with all elements and where they are applied? That is, which elements were used for the title of the website, for the menu etc..
Or do I have to try it?
It's a bit unclear to me what you mean "what elements" and a "list with all elements". X3, like most other websites, uses expected html tags like <h1> (title), <h2>, <p> throughout, and then it uses hundreds (if not thousands) of it's own classes to define styles for all elements, and child elements down to minute detail. For example, the main class for menu is ".menu", but all styling depends on the layout, and there are of course sub-styles for child elements that define specific style.

If you are going to use custom CSS, then you would need to use your browser inspector to find classes for the elements you want to style.

If you are using Google fonts, and want more info on the items explained in my previous post, below are more details. However, as also noted in my last reply, if you really intend to make substantial changes to styling, it would be counter-productive to to use the internal X3 mechanism, as opposed to native CSS styling (which is how all websites are styled).
Code
# Load Multiple fonts, and assigns 'Oswald' to logo and headers
Open+Sans:400,700,400i|Oswald:400,700

# Sets header font to bold and the logo is styled italic
Open+Sans:400,700,400i|Oswald:400,700|header:bold|logo:italic

# There are many elements available to style
Open+Sans:400,700,400i|body: |logo: |menu: |topbar: |sidebar: |header: |subheader: |styled: |footer:

# You can add the following styles to an element:
# bold
# normal
# [weight] // 300, 400, 800, 900 etc
# italic
# uppercase
# [color] // FFFFFF, 990000, 676767 etc
# [font] // Roboto etc
# [xxlarge, xlarge, large, small, xsmall, xxsmall] // increment font size

# Sets logo and header font to Oswald and large uppercase menu
Open+Sans:400,700,400i|Oswald:400,700|header:Oswald|logo:Oswald|menu:uppercase,large
As you may understand, X3 is a complex machinery in terms of styling/CSS, and needs to adjust nicely across all skins (colors), layouts and screen sizes. It is not something we can easily make "public" to edit, without compromising the core design. If you have some knowledge of CSS, you can easier adjust styles for all classes/elements, which you could find from your browser developer > inspect elements.

Having said the above, it is likely in a future re-vision of X3, we will try to make it easier to change some main styles, primarily font styles.

If you have basic requests about some style you want to adjust, I might be able to assist with some custom CSS.
 
mmi85
Topic Author
Posts: 5
Joined: 12 Aug 2019, 00:59

Re: Adding fonts

15 Aug 2019, 09:08

Hi

Thanks - found now all I need.

Best wishes
 
mmi85
Topic Author
Posts: 5
Joined: 12 Aug 2019, 00:59

Re: Adding fonts

15 Aug 2019, 09:58

Hi Karl

One last Question: I have to put a reference to the licence of the fonts to the header of all sits. It is a comment, starting with <!-- ...
If I add the reference to Settings --> Custom --> Custom head <html> it do not apear in any site... is there a possibility to do so?

Thank you
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Adding fonts

16 Aug 2019, 00:05

It's actually a feature of X3 to "minimize" code and remove <!-- comments --> for faster output. There is no real advantage to this, so I might remove it. For now, there is alternative syntax for comments which should work. Try this:
Code
<? your comment be here ?>
Alternatively, add the comment inside a Javascript <script> tag:
Code
<script>/* your comment be here */</script>
 
mmi85
Topic Author
Posts: 5
Joined: 12 Aug 2019, 00:59

Re: Adding fonts

18 Aug 2019, 06:26

Hi Kars
It worked fine with the php-script. Yes, I have some skills in html and css.

Thank you for helping
Best wishes
Marjan