Add Requiner font and styles for Logo component

- Introduced @font-face for Requiner font with multiple source paths.
- Created .logo-text class to apply Requiner font with normal weight and letter-spacing.
- Added .logo-text-bold class for bold text styling, including text-stroke for enhanced visibility.
This commit is contained in:
Cesar Mendivil 2025-11-06 15:20:09 -07:00
parent a06ffa8f79
commit 70317f95f8
3 changed files with 40 additions and 8 deletions

View File

@ -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;
}

View File

@ -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>
)}
</>