Remove fonts from store

apps/player/cypress/e2e/app/root.cy.ts

@@ -20,11 +20,6 @@ describe('<root>', () => {
     it('should set the correct background color', () => {
       cy.query('root').should('have.css', 'background-color', 'rgb(233, 241, 245)');
     });
-
-    it('should set the correct font', () => {
-      cy.query('root').should('have.css', 'font-family', 'regularFont');
-      cy.query('root').should('have.css', 'font-weight', '300');
-    });
   });
 
   describe('slot', () => {

apps/player/cypress/e2e/app/show-title.cy.ts

@@ -16,7 +16,6 @@ describe('<show-title>', () => {
         })}"></show-title>`,
         [show, { version: 5, theme }]
       );
-      cy.query('show-title').should('have.css', 'font-family', 'boldFont');
       cy.query('show-title').should('have.css', 'color', 'rgb(0, 0, 0)');
     });
   });

apps/player/cypress/e2e/app/subscribe-button.cy.ts

@@ -28,7 +28,6 @@ describe('<subscribe-button>', () => {
       cy.query('subscribe-button').should('have.css', 'color', 'rgb(0, 128, 0)');
       cy.query('subscribe-button').should('have.css', 'border-color', 'rgb(255, 255, 0)');
       cy.query('subscribe-button').should('have.css', 'background-color', 'rgb(0, 0, 255)');
-      cy.query('subscribe-button').should('have.css', 'font-family', 'boldFont');
     });
   });
 

apps/player/src/components/episode-subtitle/EpisodeSubtitle.vue

@@ -1,22 +1,17 @@
 <template>
-  <div class="podlove-player--episode-subtitle block overflow-hidden" :style="style" data-test="episode-subtitle">
+  <div class="podlove-player--episode-subtitle block overflow-hidden" data-test="episode-subtitle">
     {{ state.subtitle }}
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { mapState } from 'redux-vuex';
 import select from '../../store/selectors/index.js';
 
 const state = mapState({
-  font: select.theme.fontRegular,
   subtitle: select.episode.subtitle
 });
 
-const style = computed(() => ({
-  ...state.font
-}));
 </script>
 
 <style lang="postcss" scoped>

apps/player/src/components/episode-title/EpisodeTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 :style="style" data-test="episode-title">
+  <h1 class="font-bold" data-test="episode-title">
     <a
       v-if="state.link"
       class="podlove-player--episode-title block overflow-hidden"
@@ -16,20 +16,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { mapState } from 'redux-vuex';
 import select from '../../store/selectors/index.js';
 
 const state = mapState({
-  font: select.theme.fontBold,
   title: select.episode.title,
   link: select.episode.link,
   target: select.target
 });
 
-const style = computed(() => ({
-  ...state.font
-}));
 </script>
 
 <style lang="postcss" scoped>

apps/player/src/components/error/Error.vue

@@ -8,8 +8,7 @@
     <div class="p-6 text-center">
       <h3
         v-if="state.title"
-        class="podlove-player--error--title text-2xl mb-5"
-        :style="{ font: state.headline }"
+        class="podlove-player--error--title text-2xl mb-5 font-bold"
         data-test="error--title"
       >
         {{ t(state.title) }}
@@ -46,8 +45,7 @@ const state = mapState({
   active: select.error.active,
   title: select.error.title,
   message: select.error.message,
-  retry: select.error.retry,
-  headline: select.theme.fontBold
+  retry: select.error.retry
 });
 
 const dispatch = injectStore().dispatch;

apps/player/src/components/root/Root.vue

@@ -1,19 +1,12 @@
 <template>
   <div class="podlove-player antialiased text-base" :style="{ ...theme.font }" data-test="root" source="">
     <slot />
-    <font
-      v-for="(font, index) in theme.fonts"
-      :key="index"
-      :src="font.src"
-      :name="font.name"
-      :weight="font.weight"
-    />
+
   </div>
 </template>
 
 <script lang="ts" setup>
 import { mapState } from 'redux-vuex';
-import { Font } from '@podlove/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { fade, lighten } from 'farbraum';
@@ -23,8 +16,6 @@ import select from '../../store/selectors/index.js';
 const { locale } = useI18n({ useScope: 'global' });
 
 const theme = mapState({
-  font: select.theme.fontRegular,
-  fonts: select.theme.fonts,
   language: select.language,
   brand: select.theme.brand,
   brandLightest: select.theme.brandLightest,
@@ -162,10 +153,15 @@ const transcriptsEntryBackgroundActive = computed(() => fade(theme.alt, 0.8));
   --podlove-player--subscribe-button--color: v-bind('theme.brandDark');
   --podlove-player--subscribe-button--border-color: v-bind('theme.brandDark');
   --podlove-player--subscribe-button--background: v-bind('theme.alt');
+
+  --podlove-player--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --podlove-player--font-weight: 300;
 }
 
 .podlove-player {
   background: var(--podlove-player--background);
+  font-family: var(--podlove-player--font);
+  font-weight: var(--podlove-player--font-weight);
 }
 
 .entry-enter-active,

apps/player/src/components/show-title/ShowTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="podlove-player--show-title" :style="style" data-test="show-title">
+  <h1 class="podlove-player--show-title font-bold" data-test="show-title">
     <a v-if="state.link" :href="state.link" :target="state.target" data-test="show-title--link">{{
       state.title
     }}</a>
@@ -8,20 +8,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { mapState } from 'redux-vuex';
 import select from '../../store/selectors/index.js';
 
 const state = mapState({
-  font: select.theme.fontBold,
   title: select.show.title,
   link: select.show.link,
   target: select.target
 });
-
-const style = computed(() => ({
-  ...state.font
-}));
 </script>
 
 <style lang="postcss" scoped>

apps/player/src/components/subscribe-button/SubscribeButton.vue

@@ -11,10 +11,10 @@
       rounded-sm
       border
       whitespace-nowrap
+      font-bold
     "
     data-test="subscribe-button"
     :aria-label="t(state.a11y.key, state.a11y.attr)"
-    :style="style"
     @click="show"
   >
     <plus-icon class="mr-1" />
@@ -23,7 +23,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { PlusIcon } from '@podlove/components';
 import { mapState, injectStore } from 'redux-vuex';
 import { useI18n } from 'vue-i18n';
@@ -34,17 +33,12 @@ import select from '../../store/selectors/index.js';
 const { t } = useI18n();
 
 const state = mapState({
-  font: select.theme.fontBold,
   available: select.subscribeButton.available,
   a11y: select.accessibility.subscribeButton
 });
 
 const dispatch = injectStore().dispatch;
 
-const style = computed(() => ({
-  ...state.font
-}));
-
 const show = () => {
   dispatch(overlay.show());
 };

apps/player/src/components/tab-files/components/File.vue

@@ -4,7 +4,7 @@
     :href="file.url"
     data-test="tab-files--download"
     @mouseover="hover(file)"
-    @mouseout="hover()"
+    @mouseout="hover(file)"
     @click="click(file)"
   >
     <div class="flex h-10">
@@ -16,9 +16,9 @@
         <pdf-file-icon :filled="true" v-if="icon === 'pdf-file'" />
       </span>
       <div class="w-full">
-        <h3 :style="state.font">{{ file.title }}</h3>
+        <h3 class="font-bold">{{ file.title }}</h3>
         <div class="opacity-50 text-sm">
-          <span class="uppercase" :style="state.font">{{ type }}</span>
+          <span class="uppercase font-bold">{{ type }}</span>
           <span class="px-2">-</span>
           <span>{{ toMegabyte(file.size) }} MB</span>
         </div>
@@ -29,15 +29,13 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { mapState, injectStore } from 'redux-vuex';
+import { injectStore } from 'redux-vuex';
 import { compose, includes, defaultTo, toLower } from 'ramda';
 import { DownloadIcon, AudioFileIcon, VideoFileIcon, TextFileIcon, PdfFileIcon } from '@podlove/components';
 import { toMegabyte } from '@podlove/utils/math';
 import { hoverFile, selectFile } from '@podlove/player-actions/files';
 import { useI18n } from 'vue-i18n';
 
-import select from '../../../store/selectors/index.js';
-
 const { t } = useI18n();
 const isType = (type) => compose(includes(type), toLower, defaultTo(''));
 const audio = isType('audio');
@@ -58,10 +56,6 @@ const props = defineProps({
   }
 });
 
-const state = mapState({
-  font: select.theme.fontBold
-});
-
 const dispatch = injectStore().dispatch;
 
 const type = computed(() => {

apps/player/src/components/tab-share/components/Embed.vue

@@ -43,9 +43,6 @@
             font-bold
           "
           :title="t(state.copyLabel.key, state.copyLabel.attr)"
-          :style="{
-            ...state.font
-          }"
         >
           <span aria-hidden="true">{{ t('SHARE.ACTIONS.COPY') }}</span>
         </button>
@@ -67,7 +64,6 @@ const { t } = useI18n();
 const state = mapState({
   embedSize: select.share.embedSize,
   embedCode: select.share.code,
-  font: select.theme.fontBold,
   inputLabel: select.accessibility.embedCode,
   copyLabel: select.accessibility.copyEmbedLink
 });

apps/player/src/components/tab-title/TabTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mb-6" data-test="tab-title">
     <div class="flex justify-between">
-      <h1 class="text-xl mb-4" :style="state.font">
+      <h1 class="text-xl mb-4 font-extrabold">
         <slot />
       </h1>
       <button
@@ -35,7 +35,6 @@ const props = defineProps({
 });
 
 const state = mapState({
-  font: select.theme.fontCi,
   title: select.accessibility.closeTab(props.tab)
 });
 

apps/player/src/components/tab-transcripts/components/Entry.vue

@@ -1,17 +1,13 @@
 <template><render /></template>
 
 <script lang="ts" setup>
-import { mapState } from 'redux-vuex';
-
 import { computed, h } from 'vue';
 import { useI18n } from 'vue-i18n';
 import {
   PodloveWebPlayerTimelineTranscriptEntry,
   PodloveWebPlayerTimelineChapterEntry
 } from '@podlove/types';
 
-import select from '../../../store/selectors/index.js';
-
 const { t } = useI18n();
 
 const container = (children = []) =>
@@ -30,8 +26,7 @@ const chapter = (children = []) =>
   h(
     'div',
     {
-      class: { 'text-lg': true, 'podlove-player--transcript-entry--chapter': true },
-      style: chapterStyle.value,
+      class: { 'text-lg': true, 'podlove-player--transcript-entry--chapter': true, 'font-extrabold': true },
       ...(props.prerender
         ? {}
         : {
@@ -45,8 +40,7 @@ const speaker = () =>
   h(
     'div',
     {
-      class: { '-ml-6': true, 'podlove-player--transcript-entry--speaker': true },
-      style: speakerStyle.value
+      class: { '-ml-6': true, 'podlove-player--transcript-entry--speaker': true, 'font-bold': true }
     },
     [
       props.entry.speaker.avatar
@@ -136,11 +130,6 @@ const props = defineProps<{
   searchResults: number[];
 }>();
 
-const state = mapState({
-  fontCi: select.theme.fontCi,
-  fontBold: select.theme.fontBold
-});
-
 const query = computed(() => {
   if (!props.searchQuery || props.searchResults.length === 0) {
     return null;
@@ -149,9 +138,6 @@ const query = computed(() => {
   return new RegExp(props.searchQuery, 'ig');
 });
 
-const chapterStyle = computed(() => state.fontCi);
-const speakerStyle = computed(() => state.fontBold);
-
 // Event Bindings
 const onClick = (entry) => {
   emit('onClick', entry);

apps/player/src/components/tab-transcripts/components/Prerender.vue

@@ -10,15 +10,13 @@
       :ghost-active="state.ghostActive"
       :ghost-time="state.ghostTime"
       :search-results="state.searchResults"
-      :chapter-style="chapterStyle"
-      :speaker-style="speakerStyle"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { mapState } from 'redux-vuex';
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import { asyncAnimation } from '@podlove/utils/helper';
 
 import select from '../../../store/selectors/index.js';
@@ -41,15 +39,9 @@ const state = mapState({
   ghostActive: select.ghost.active,
   ghostTime: select.ghost.time,
   searchResults: select.transcripts.searchResults,
-  searchQuery: select.transcripts.searchQuery,
-  fontCi: select.theme.fontCi,
-  fontBold: select.theme.fontBold
+  searchQuery: select.transcripts.searchQuery
 });
 
-const chapterStyle = computed(() => state.fontCi);
-
-const speakerStyle = computed(() => state.fontBold);
-
 onMounted(() => {
   nextTick()
     .then(() =>