chore: use the same font as the main app in the widget (#4853)

* chore: use the same font as the main app

* match css file

* use string since values are the same

src/components/Widget/index.tsx

-// Import fonts.css for the side-effect of loading fonts for @uniswap/widgets.
-// eslint-disable-next-line no-restricted-imports
-import '@uniswap/widgets/dist/fonts.css'
-
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import {
@@ -13,8 +9,7 @@ import {
 } from '@uniswap/widgets'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent } from 'analytics'
-import { EventName, SectionName } from 'analytics/constants'
-import { SWAP_PRICE_UPDATE_USER_RESPONSE } from 'analytics/constants'
+import { EventName, SectionName, SWAP_PRICE_UPDATE_USER_RESPONSE } from 'analytics/constants'
 import { useTrace } from 'analytics/Trace'
 import {
   formatPercentInBasisPointsNumber,

src/theme/widget.ts

 import { colorsDark, colorsLight } from './colors'
 
+const fonts = {
+  fontFamily: 'Inter custom',
+}
+
 export const LIGHT_THEME = {
   // surface
   container: colorsLight.backgroundSurface,
@@ -16,6 +20,8 @@ export const LIGHT_THEME = {
   success: colorsLight.accentSuccess,
   warning: colorsLight.accentWarning,
   error: colorsLight.accentCritical,
+
+  ...fonts,
 }
 
 export const DARK_THEME = {
@@ -34,4 +40,6 @@ export const DARK_THEME = {
   success: colorsDark.accentSuccess,
   warning: colorsDark.accentWarning,
   error: colorsDark.accentCritical,
+
+  ...fonts,
 }