Docs

[kolibri.events]

Hi,

i am trying to work myself through configuring X theme (ethos) for site http://test.kolibri.event but i currently fail at setting page title fonts via css.

WordPress version 4.6.1–de_DE, X version Version: 4.6.4, and Cornerstone plugin Version 1.3.3.

This is what i configured in http://test.kolibri.events/wp-admin/customize.php at “Custom Code” > “EDIT GLOBAL CSS” in a child template:

@font-face {
  font-family: 'HaloHandletter';
  font-style: normal;
  font-weight: normal;
  src: url('wp-content/themes/font/HaloHandletter.otf') format('opentype');
}

@font-face {
  font-family: 'Horizon-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('wp-content/themes/font/Horizon-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Horizon-Bold';
  font-style: normal;
  font-weight: normal;
  src: url('wp-content/themes/font/Horizon-Bold/Horizon-Bold.eot'); /* IE9 Compat Modes */
  src: url('wp-content/themes/font/Horizon-Bold/Horizon-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('wp-content/themes/font/Horizon-Bold/Horizon-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('wp-content/themes/font/Horizon-Bold/Horizon-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('wp-content/themes/font/Horizon-Bold/Horizon-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('wp-content/themes/font/Horizon-Bold/Horizon-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Horizon-Light';
  font-style: normal;
  font-weight: normal;
  src: url('wp-content/themes/font/Horizon-Light.otf') format('opentype');}

.entry-title {
   font-family: 'Horizon-Bold' !important;
}

.text-white h2,
.text-white p,
.text-white .x-btn {
  color: #fff;
}

.text-white .x-btn {
  border-color: #fff;
}

.text-white .x-icon {
  color: #fff;
}

.text-white .x-hr {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.text-white .x-btn:hover {
  opacity: 0.75;
}

When changing the font for .entry-title the page title is shown correctly in preview for all pages.
If i close CSS and click “save & publish” it is still shown correctly in preview for all pages.
But if i switch to another browser tab and click through the menu it is only shown for the first (demo) page. All other pages try to load the font but after few seconds time out and show browser default. If i change the font for .entry-title it is updated for the demo page but all other keep default.

Could someone please help?

BR Heiner

[Rupok]

Hi there,

Please change the sources to full URL. For example instead of wp-content/themes/font/Horizon-Bold/Horizon-Bold.eot use http://test.kolibri.events/wp-content/themes/font/Horizon-Bold/Horizon-Bold.eot

Thanks!

[kolibri.events]

Hi,
thank you very much, that solved my issue.
Is there any way to keep the domain variable so i can use the same css for prod and test?

Is this really the best way to define a font or do you know a faster way (speaking of performance / site loading time)

@font-face {
  font-family: 'Horizon-Bold';
  font-style: normal;
  font-weight: normal;
  src: url('http://test.kolibri.events/wp-content/themes/font/Horizon-Bold/Horizon-Bold.eot'); /* IE9 Compat Modes */
  src: url('http://test.kolibri.events/wp-content/themes/font/Horizon-Bold/Horizon-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://test.kolibri.events/wp-content/themes/font/Horizon-Bold/Horizon-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://test.kolibri.events/wp-content/themes/font/Horizon-Bold/Horizon-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('http://test.kolibri.events/wp-content/themes/font/Horizon-Bold/Horizon-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://test.kolibri.events/wp-content/themes/font/Horizon-Bold/Horizon-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

… and finally, i found out that if i switch from child to main theme, customize css (see first post) and switch back to the child, the changes are shown in its css. Meaning: Both share the same css file? Will it be deleted if i update the main theme?

[Christopher]

Hi there,

Custom fonts should be added using @font-face method.
No, updating won’t alter your customization.
You can always import parent theme customizer settings to your child theme under X addons page.

Hope it helps.

[Author]

Posts