diff --git a/packages/broadcast-panel/public/assets/Requiner-6RRLM.woff b/packages/broadcast-panel/public/assets/Requiner-6RRLM.woff
new file mode 100644
index 0000000..c889450
Binary files /dev/null and b/packages/broadcast-panel/public/assets/Requiner-6RRLM.woff differ
diff --git a/shared/components/Logo.css b/shared/components/Logo.css
new file mode 100644
index 0000000..fb3cdd1
--- /dev/null
+++ b/shared/components/Logo.css
@@ -0,0 +1,29 @@
+/* Requiner Font for Logo Component */
+@font-face {
+  font-family: 'Requiner';
+  src: url('/fonts/Requiner-6RRLM.woff') format('woff'),
+       url('/assets/Requiner-6RRLM.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Force Requiner font for logo text */
+.logo-text {
+  font-family: 'Requiner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+  font-weight: 400 !important;
+  letter-spacing: 0.5px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.logo-text-bold {
+  font-family: 'Requiner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.5px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* Forzar bold visible con text-stroke */
+  -webkit-text-stroke: 0.2px currentColor;
+  paint-order: stroke fill;
+}
diff --git a/shared/components/Logo.tsx b/shared/components/Logo.tsx
index 9592449..d484cbf 100644
--- a/shared/components/Logo.tsx
+++ b/shared/components/Logo.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import './Logo.css';
 
 interface LogoProps {
   size?: 'sm' | 'md' | 'lg';
@@ -23,6 +24,14 @@ export const Logo: React.FC<LogoProps> = ({
 }) => {
   const dimensions = sizeMap[size];
 
+  const textStyle: React.CSSProperties = {
+    fontSize: dimensions.fontSize,
+    letterSpacing: '0.5px',
+    transition: 'color 0.3s ease',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale'
+  };
+
   const content = (
     <>
       <img 
@@ -37,14 +46,8 @@ export const Logo: React.FC<LogoProps> = ({
         onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
       />
       {showText && (
-        <span 
-          style={{ 
-            fontSize: dimensions.fontSize,
-            fontFamily: 'Requiner, sans-serif',
-            transition: 'color 0.3s ease'
-          }}
-        >
-          Avanza<span style={{ fontWeight: 700 }}>Cast</span>
+        <span className="logo-text" style={textStyle}>
+          Avanza<span className="logo-text-bold">Cast</span>
         </span>
       )}
     </>