La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
Once I created a new font folder and added all the various font formats, I went into a _typorgraphy.css file and added them using @font-face. Then I called the fonts within some test headings. The custom fonts added don't pick up properly and don't display.
I am not sure if perhaps the relative/absolute paths for the font locations is the problem. I added the fonts as a folder within the file driectory as well as the main root file folder, and tried to link from both, but no luck.
put your @font-face code at the very top of the "theme-override.css"(or somethign like that) or "main.css" and overwrite some default hubls.
By default the loading order is as following - Single CSS files are combined in the main.css file - main.css is getting loaded in your base.html - the theme-override.css overrides a few settings of the main.css with the settings you set in the design/theme settings
While there is no right or wrong how to add a custom font, my personal solution looks like this(theme-override.css)
{# headline font #}
@font-face {
font-family: 'headline-font'; {# change the name to the name you'd like #}
src: {# add source(s) here #}
font-weight: {# the font weight of the font #};
font-style: normal; {# unless it's a italic font it's 'normal' #}
}
{# text font #}
@font-face {
font-family: 'text-font'; {# change the name to the name you'd like #}
src: {# add source(s) here #}
font-weight: {# the font weight of the font #};
font-style: normal; {# unless it's a italic font it's 'normal' #}
}
...
{# other hubls #}
...
{% set main_font = "'text-font', Arial, sans-serif" %}
{% set main_font_weight = 400 %}
{% set head_font = "'headline-font', Arial, sans-serif" %}
{% set head_font_weight = 700 %}
...
{# other hubls #}
...
body{
font-family: {{ main_font }};
font-weight: {{ main_font_weight }};
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
font-family: {{ head_font }};
font-weight: {{ head_font_weight }};
}
p{
font-family: {{ main_font }};
font-weight: {{ main_font_weight }};
}
Just a tipp: Don't just copy paste this in your theme-override.css since it might get overwritten by already existing CSS.
Search for the body, h1-h6 and p element in your CSS and edit it to match the logic.
(You might need to add those font hubls in other classes, too)