fix: register Inter woff font for curve outlining, fix tagline spacing
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 24s
Build & Deploy / 🧪 QA (push) Successful in 1m23s
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🏗️ Build (push) Has been cancelled
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 24s
Build & Deploy / 🧪 QA (push) Successful in 1m23s
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🏗️ Build (push) Has been cancelled
This commit is contained in:
@@ -17,6 +17,23 @@ import {
|
|||||||
} from '@react-pdf/renderer';
|
} from '@react-pdf/renderer';
|
||||||
import * as path from 'path';
|
import * as path from 'path';
|
||||||
|
|
||||||
|
// Register embedded fonts so Ghostscript -dNoOutputFonts can convert them to
|
||||||
|
// outlines (curves). Built-in PDF fonts like Helvetica are NEVER embedded and
|
||||||
|
// therefore cannot be outlined — always use a physical font file here.
|
||||||
|
Font.register({
|
||||||
|
family: 'Inter',
|
||||||
|
fonts: [
|
||||||
|
{
|
||||||
|
src: path.join(process.cwd(), 'public', 'fonts', 'Inter-Regular.woff'),
|
||||||
|
fontWeight: 'normal',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: path.join(process.cwd(), 'public', 'fonts', 'Inter-Bold.woff'),
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
export interface PersonData {
|
export interface PersonData {
|
||||||
name: string;
|
name: string;
|
||||||
role: string;
|
role: string;
|
||||||
@@ -48,7 +65,7 @@ const styles = StyleSheet.create({
|
|||||||
height: '61mm',
|
height: '61mm',
|
||||||
backgroundColor: COLORS.primary,
|
backgroundColor: COLORS.primary,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
fontFamily: 'Helvetica',
|
fontFamily: 'Inter',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
pageBleedBack: {
|
pageBleedBack: {
|
||||||
@@ -56,7 +73,7 @@ const styles = StyleSheet.create({
|
|||||||
height: '61mm',
|
height: '61mm',
|
||||||
backgroundColor: COLORS.white,
|
backgroundColor: COLORS.white,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
fontFamily: 'Helvetica',
|
fontFamily: 'Inter',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -108,7 +125,9 @@ const styles = StyleSheet.create({
|
|||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
gap: 6, // Increased gap for more spacing under tagline
|
// Extra top padding so tagline text has breathing room from the green border
|
||||||
|
paddingTop: 6,
|
||||||
|
gap: 5,
|
||||||
},
|
},
|
||||||
frontIconsGroup: {
|
frontIconsGroup: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
@@ -258,15 +277,14 @@ const styles = StyleSheet.create({
|
|||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
borderTop: `0.5pt solid ${COLORS.grayText}`,
|
borderTop: `0.5pt solid ${COLORS.grayText}`,
|
||||||
paddingTop: '2mm',
|
paddingTop: '3mm',
|
||||||
marginTop: 'auto',
|
marginTop: 'auto',
|
||||||
},
|
},
|
||||||
addressFooterText: {
|
addressFooterText: {
|
||||||
fontSize: 5,
|
fontSize: 6,
|
||||||
color: COLORS.neutralDark,
|
color: COLORS.grayText,
|
||||||
letterSpacing: 1.5,
|
letterSpacing: 0.3,
|
||||||
textTransform: 'uppercase',
|
fontWeight: 'normal',
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -788,7 +806,7 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
|
|||||||
|
|
||||||
<View style={styles.addressFooter}>
|
<View style={styles.addressFooter}>
|
||||||
<Text style={styles.addressFooterText}>
|
<Text style={styles.addressFooterText}>
|
||||||
KLZ Vertriebs GmbH • Raiffeisenstraße 22 • 73630 Remshalden
|
KLZ Vertriebs GmbH · Raiffeisenstraße 22 · 73630 Remshalden
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</Page>
|
</Page>
|
||||||
|
|||||||
Reference in New Issue
Block a user