feat(renderer): use system fonts

This decreases bundle size and avoid layout shifts due to font loading.

Where it is not apparent wheter people can interact with a button, icons
were added to disambiguate the button from the surrounding text.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

2 files changed, 3 insertions, 2 deletions

diff --git a/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx b/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx
index 107d9f1..0cbcac4 100644
--- a/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx
+++ b/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx
@@ -40,10 +40,12 @@ const Header = styled('th')({
 
 const SectionHeader = styled(Header)(({ theme }) => ({
   padding: `${theme.spacing(2)} 0`,
+  fontWeight: theme.typography.fontWeightBold,
 }));
 
 const SubHeader = styled(Header)(({ theme }) => ({
   color: theme.palette.text.secondary,
+  fontWeight: theme.typography.fontWeightMedium,
 }));
 
 const Cell = styled('td')({
diff --git a/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx b/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx
index 630cbe0..372498b 100644
--- a/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx
+++ b/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx
@@ -39,8 +39,7 @@ export default function TrustCertificateDialog({
   return (
     <>
       <Typography mt={2}>
-        <WarningAmberIcon fontSize="inherit" />{' '}
-        <strong>{t('trustWarning')}</strong>
+        <WarningAmberIcon fontSize="inherit" /> {t('trustWarning')}
       </Typography>
       <Box mt={1}>
         <Button