Changed font

public/index.html

@@ -18,6 +18,11 @@
       type="text/css"
       href="https://fonts.googleapis.com/css?family=Mulish"
     />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://fonts.googleapis.com/css?family=DM+Sans"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

src/assets/styles/_base.scss

@@ -8,6 +8,7 @@ body {
 
 * {
   box-sizing: border-box;
+  font-family: "DM Sans";
 }
 
 html {

src/components/About/AboutHeader/AboutHeader.styled.js

@@ -5,7 +5,7 @@ export const AboutHeaderContainer = styled(Box)`
   margin: 72px;
 `;
 export const AboutHeaderTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 700;
   font-size: 72px;
@@ -13,7 +13,7 @@ export const AboutHeaderTitle = styled(Typography)`
   color: ${selectedTheme.primaryPurple};
 `;
 export const AboutHeaderParagraph = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 16px;

src/components/About/AboutSection/AboutSection.styled.js

@@ -15,7 +15,7 @@ export const AboutSectionContainer = styled(Box)`
   margin-bottom: 72px;
 `;
 export const AboutSectionTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 600;
   font-size: 24px;
@@ -24,7 +24,7 @@ export const AboutSectionTitle = styled(Typography)`
   margin-bottom: 18px;
 `;
 export const AboutSectionText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 16px;

src/components/About/CheckOffersButton/CheckOffersButton.styled.js

@@ -10,7 +10,7 @@ export const CheckOffersButtonContainer = styled(PrimaryButton)`
   height: 49px;
   & button {
     color: ${selectedTheme.primaryPurple};
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-style: normal;
     font-weight: 600;
     font-size: 12px;

src/components/Buttons/PrimaryButton/PrimaryButton.js

@@ -37,5 +37,5 @@ PrimaryButton.propTypes = {
 };
 
 PrimaryButton.defaultProps = {
-  font: "Open Sans",
+  font: "DM Sans",
 };

src/components/Cards/ChatCard/ChatCard.styled.js

@@ -67,7 +67,7 @@ export const Col = styled(Box)`
 `;
 export const UserName = styled(Typography)`
   margin-bottom: 12px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;
   font-size: 24px;
@@ -77,7 +77,7 @@ export const UserName = styled(Typography)`
   }
 `;
 export const LastMessage = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryDarkTextThird};
   line-height: 22px;
   font-size: 16px;

src/components/Cards/ChatCard/LittleOfferDetails/LittleOfferDetails.styled.js

@@ -13,13 +13,13 @@ export const ChatOffer = styled(Box)`
 `;
 
 export const OfferText = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: "12px";
   color: ${selectedTheme.primaryText};
 `;
 
 export const OfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   flex: 1;
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;

src/components/Cards/ChatCard/MobileOfferDetails/MobileOfferDetails.styled.js

@@ -14,7 +14,7 @@ export const OfferCardContainerMobile = styled(Box)`
 `;
 
 export const OfferTitleMobile = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   display: none;
   flex: 1;
   color: ${selectedTheme.primaryPurple};
@@ -37,7 +37,7 @@ export const OfferTitleMobile = styled(Typography)`
   }
 `;
 export const OfferTextMobile = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 9px;
   color: ${selectedTheme.primaryText};
 `;

src/components/Cards/ChatCard/OfferLocation/OfferLocation.styled.js

@@ -20,7 +20,7 @@ export const LocationIconContainer = styled(Box)`
 `;
 
 export const XSText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 14px;

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

@@ -90,7 +90,7 @@ export const CreateOfferContainer = styled(Container)`
   }
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   /* width: 328px;
   height: 33px; */
   text-align: center;
@@ -109,7 +109,7 @@ export const CreateOfferTitle = styled(Typography)`
   }
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -159,7 +159,7 @@ export const FieldLabel = styled(Label)`
 `;
 export const SelectText = styled(Typography)`
   font-size: 16px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-weight: 400;
 `;
 export const SelectField = styled(Select)`
@@ -178,7 +178,7 @@ export const SelectField = styled(Select)`
 `;
 
 export const SelectAltText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
 
   font-style: italic;
   white-space: pre;

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.styled.js

@@ -7,7 +7,7 @@ import Option from "../../../Select/Option/Option";
 import { TextField } from "../../../TextFields/TextField/TextField";
 
 export const CreateOfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   width: 328px;
   height: 33px;
   text-align: center;
@@ -22,7 +22,7 @@ export const CreateOfferTitle = styled(Typography)`
   position: relative;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 9px;
   width: 221px;
   font-style: normal;

src/components/Cards/CreateOfferCard/SecondPart/SecondPartCreateOffer.styled.js

@@ -41,6 +41,6 @@ export const SupportedFormats = styled(Typography)`
   font-size: 13px;
   width: 100%;
   text-align: center;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   /* margin-top: 0px; */
 `;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/CheckboxDropdownList/CheckboxDropdownList.styled.js

@@ -17,7 +17,7 @@ export const SelectedItem = styled(Box)`
   padding-right: 6px;
   line-height: 12px;
   letter-spacing: 0.02em;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   cursor: pointer;
   margin-right: 3px;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/CheckboxDropdownList/SearchField/SearchField.js

@@ -15,7 +15,7 @@ const SearchField = (props) => {
       value={props.value}
       onChange={props.onChange}
       textsize={"12px"}
-      font={"Open Sans"}
+      font={"DM Sans"}
       fullWidth
       height={"40px"}
       containerStyle={{ marginTop: "6px" }}

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.js

@@ -84,7 +84,7 @@ const FilterRadioDropdown = (props) => {
             value={toSearch}
             onChange={(event) => setToSearch(event.target.value)}
             textsize={"12px"}
-            font={"Open Sans"}
+            font={"DM Sans"}
             fullWidth
             height={"40px"}
             containerStyle={{ marginTop: "6px" }}

src/components/Cards/FilterCard/FilterFooter/FilterFooter.js

@@ -25,7 +25,7 @@ const FilterFooter = (props) => {
           fullWidth
           onClick={props.toggleFilters}
           textcolor={selectedTheme.primaryPurple}
-          font="Open Sans"
+          font="DM Sans"
           style={{
             fontWeight: "600",
             fontSize: "12px",
@@ -41,7 +41,7 @@ const FilterFooter = (props) => {
         fullWidth
         onClick={handleFilters}
         textcolor={selectedTheme.primaryPurple}
-        font="Open Sans"
+        font="DM Sans"
         style={{
           fontWeight: "600",
           fontSize: "12px",

src/components/Cards/FilterCard/FilterHeader/FilterHeader.js

@@ -19,7 +19,7 @@ const FilterHeader = (props) => {
   return (
     <FilterHeaderContainer>
       <Title>{t("filters.title")}</Title>
-      <Link to="#" textsize={"12px"} font={"Open Sans"} onClick={clearFilters}>
+      <Link to="#" textsize={"12px"} font={"DM Sans"} onClick={clearFilters}>
         {t("filters.cancel")}
       </Link>
     </FilterHeaderContainer>

src/components/Cards/FilterCard/FilterHeader/FilterHeader.styled.js

@@ -13,7 +13,7 @@ export const Title = styled(Typography)`
   font-size: 24px;
   line-height: 33px;
   font-weight: 700;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   position: relative;
 `;

src/components/Cards/ItemDetailsCard/Information/Information.styled.js

@@ -12,7 +12,7 @@ export const InfoIcon = styled(Box)`
   align-items: center;
 `;
 export const InfoText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-transform: capitalize;
   @media (max-width: 600px) {
     font-size: 12px;

src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js

@@ -134,14 +134,14 @@ export const DateButtonsContainer = styled(Box)`
 `;
 
 export const PostDate = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryText};
   &::before {
     content: "Objavljeno: ";
     @media (max-width: 600px) {
       font-size: 9px;
-      font-family: "Open Sans";
+      font-family: "DM Sans";
     }
   }
   @media (max-width: 600px) {
@@ -175,41 +175,41 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 
 export const OfferCategory = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 33%;
 `;
 export const OfferPackage = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferViews = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 16px;
@@ -219,7 +219,7 @@ export const OfferDescriptionTitle = styled(Box)`
   }
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;
@@ -254,7 +254,7 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;

src/components/Cards/ItemDetailsCard/OfferDetails/OfferDetails.styled.js

@@ -34,7 +34,7 @@ export const Details = styled(Box)`
 `;
 
 export const OfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   flex: 1;
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;
@@ -92,7 +92,7 @@ export const OfferInfoContainer = styled(Box)`
   }
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 16px;
@@ -102,7 +102,7 @@ export const OfferDescriptionTitle = styled(Box)`
   }
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;
@@ -122,7 +122,7 @@ export const OfferDescriptionText = styled(Box)`
 `;
 export const DesciprtionPostDate = styled(Typography)`
   display: none;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryText};
   margin-top: 18px;
@@ -130,7 +130,7 @@ export const DesciprtionPostDate = styled(Typography)`
     content: "Objavljeno: ";
     @media (max-width: 600px) {
       font-size: 9px;
-      font-family: "Open Sans";
+      font-family: "DM Sans";
     }
   }
   @media screen and (min-width: 600px) and (max-width: 1200px) {

src/components/Cards/LittleOfferCard/LittleOfferCard.styled.js

@@ -36,11 +36,11 @@ export const OfferDetails = styled(Box)`
 export const OfferName = styled(Typography)`
     font-weight: 600;
     font-size: 16px;
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     color: ${selectedTheme.primaryPurple};
 `
 export const OfferCategory = styled(Typography)`
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 12px;
     color: ${selectedTheme.primaryDarkText};
 `

src/components/Cards/MessageCard/MessageCard.styled.js

@@ -33,7 +33,7 @@ export const MessageContent = styled(Box)`
     }
 `;
 export const MessageText = styled(Typography)`
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 16px;
     line-height: 22px;
     color: ${props => props.isMyMessage ? `white` : selectedTheme.messageText};

src/components/Cards/MiniChatCard/MiniChatCard.styled.js

@@ -27,14 +27,14 @@ export const ProfileDetails = styled(Box)`
 export const ProfileName = styled(Typography)`
   font-size: 16px;
   font-weight: 600;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${props => props.selected ? selectedTheme.primaryYellow : selectedTheme.primaryPurple};
 `;
 export const ProfileProduct = styled(Typography)`
   margin-top: 9px;
   font-size: 9px;
   color: ${props => props.selected ? "white" : selectedTheme.primaryDarkTextThird};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 10px;
   margin-left: 1px;
 `;
@@ -42,7 +42,7 @@ export const ProfileProductName = styled(Typography)`
   font-size: 12px;
   font-weight: ${props => props.selected ? "400" : "600"};
   color: ${props => props.selected ? "white" : selectedTheme.primaryDarkTextThird};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 14px;
   margin-left: 1px;
 `;

src/components/Cards/OfferCard/DeleteOffer/DeleteOffer.styled.js

@@ -91,7 +91,7 @@ export const CategoryIcon = styled(Icon)`
 `;
 
 export const DeleteQuestion = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   font-weight: 600;
   text-align: center;

src/components/Cards/OfferCard/OfferCard.styled.js

@@ -85,7 +85,7 @@ export const OfferInfo = styled(Box)`
   `}
 `;
 export const OfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   flex: 1;
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;
@@ -122,7 +122,7 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryText};
@@ -139,7 +139,7 @@ export const OfferAuthorName = styled(Typography)`
   }
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryDarkText};
   line-height: 16px;
   font-size: 12px;
@@ -165,7 +165,7 @@ export const OfferDetails = styled(Box)`
   }
 `;
 export const OfferCategory = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
@@ -177,13 +177,13 @@ export const OfferCategory = styled(Box)`
   `}
 `;
 export const OfferPackage = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 export const OfferViews = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
@@ -194,13 +194,13 @@ export const OfferViews = styled(Box)`
   `}
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;
@@ -239,7 +239,7 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;

src/components/Cards/UserReviewsCard/UserReviewsCard.styled.js

@@ -27,7 +27,7 @@ export const ReviewsHeader = styled(Grid)`
 `
 
 export const ReviewsTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   @media (max-width: 800px) {
     display: none;
@@ -69,7 +69,7 @@ export const NoReviewsContainer = styled(Box)`
 export const NoReviewsText = styled(Typography)`
   color: ${selectedTheme.primaryPurple};
   font-size: 24px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-align: center;
   font-weight: 700;
   width: 100%;
@@ -78,7 +78,7 @@ export const NoReviewsText = styled(Typography)`
 export const NoReviewsAltText = styled(Typography)`
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-align: center;
   width: 100%;
   margin-bottom: 36px;
@@ -104,14 +104,14 @@ export const ThumbBox = styled(Grid)`
 export const ReviewQuoteBox = styled(Grid)`
 `
 export const ReviewQuoteText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
 `
 export const ReviewDetails = styled(Grid)`
 `
 export const ReviewDetailsText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   font-style: italic;
@@ -125,7 +125,7 @@ export const ReviewDetailsValue = styled(Typography)`
 export const ProfileName = styled(Typography)`
   font-weight: 600;
   font-size: 16px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
 `
 export const ReviewContainer = styled(Box)`
 `

src/components/ChatColumn/ChatColumn.styled.js

@@ -39,7 +39,7 @@ export const TitleSortContainer = styled(Box)`
 export const HeaderSelect = styled(Select)`
   width: 210px;
   height: 35px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 3px;
   font-weight: 400;
   position: relative;

src/components/CheckBox/CheckBox.styled.js

@@ -25,7 +25,7 @@ export const FormControlLabelStyled = styled(FormControlLabel)`
     `}
   margin-right: 0;
   & label {
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 12px;
   }
   & span:nth-child(1) svg {

src/components/CheckBox/Label.styled.js

@@ -10,7 +10,7 @@ export const LabelContainer = styled(Box)`
 `
 
 export const LeftLabel = styled(FormLabel)`
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -27,6 +27,6 @@ export const RightLabel = styled(FormLabel)`
     max-width: 100px;
     cursor: pointer;
     color: ${selectedTheme.primaryText};
-    font-family: "Open Sans";
+    font-family: "DM Sans";
 
 `

src/components/CreateReview/CreateReview.styled.js

@@ -92,7 +92,7 @@ export const CreateReviewTitle = styled(Typography)`
   width: 100%;
   text-align: center;
   color: ${selectedTheme.primaryPurple};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 24px;
   font-weight: 700;
   padding-bottom: 36px;

src/components/CreateReview/FirstStep/FirstStepCreateReview.styled.js

@@ -17,7 +17,7 @@ export const CreateReviewTitle = styled(Typography)`
   width: 100%;
   text-align: center;
   color: ${selectedTheme.primaryPurple};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 24px;
   font-weight: 700;
   padding-bottom: 36px;
@@ -78,7 +78,7 @@ export const SelectField = styled(Select)`
   }
 `;
 export const SelectOption = styled(Option)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   text-align: left;
   @media (max-width: 600px) {
@@ -89,7 +89,7 @@ export const SelectOption = styled(Option)`
 `;
 export const CommentField = styled(TextField)`
   & * {
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 16px;
     &::-webkit-scrollbar {
       width: 5px;

src/components/CreateReview/ThirdStep/ThirdStepCreateReview.styled.js

@@ -20,7 +20,7 @@ export const LogoImage = styled(Logo)`
 export const MainTitle = styled(Typography)`
   font-weight: 700;
   font-size: 24px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-align: center;
   width: 100%;
   color: ${selectedTheme.primaryPurple};
@@ -28,7 +28,7 @@ export const MainTitle = styled(Typography)`
 export const AltTitle = styled(Typography)`
   width: 100%;
   text-align: center;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-weight: 400;
   font-size: 16px;
   color: ${selectedTheme.primaryPurple};

src/components/DirectChat/DirectChatContent/DirectChatContentHeader/DirectChatContentHeader.styled.js

@@ -33,7 +33,7 @@ export const ProfileDetails = styled(Box)`
 `
 export const ProfileName = styled(Box)`
     font-weight: 600;
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 16px;
     color: ${selectedTheme.primaryPurple};
 `
@@ -44,7 +44,7 @@ export const ProfileLocation = styled(Box)`
 export const ProfileLocationText = styled(Box)`
     color: ${selectedTheme.primaryDarkText};
     font-size: 12px;
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     margin-left: 5.5px;
 
 `

src/components/DirectChat/DirectChatHeaderTitle/DirectChatHeaderTitle.styled.js

@@ -9,7 +9,7 @@ export const MessageIcon = styled(Message)`
 
 `
 export const HeaderTitleContent = styled(Typography)`
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 16px;
     position: relative;
     left: 9px;

src/components/DirectChat/MiniChatColumn/MiniChatColumnHeader/MiniChatColumnHeaderTitle.styled.js

@@ -17,7 +17,7 @@ export const MailIcon = styled(Mail)`
     }
 `
 export const HeaderTitleContent = styled(Typography)`
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 16px;
     position: relative;
     left: 9px;

src/components/Dropdown/DropdownItem/DropdownItem.styled.js

@@ -5,5 +5,5 @@ export const DropdownItemContainer = styled(Box)`
 `
 
 export const DropdownItemStyled = styled(Box)`
-    font-family: "Open Sans";
+    font-family: "DM Sans";
 `

src/components/Dropdown/DropdownList/DropdownList.styled.js

@@ -19,7 +19,7 @@ export const DropdownTitle = styled(Typography)`
   padding-bottom: 10px;
   padding-top: 5px;
   padding-right: 0.9rem;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${(props) =>
     props.disabled
       ? selectedTheme.iconStrokeDisabledColor

src/components/Footer/AboutFooter.styled.js

@@ -11,7 +11,7 @@ export const AboutFooterContainer = styled(Box)`
   padding: 0 72px;
 `;
 export const AboutFooterText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
@@ -36,7 +36,7 @@ export const ButtonContainer = styled(Link)`
   top: 29px;
 `;
 export const LinkText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryGrayText};

src/components/Header/AboutHeader/AboutHeader.styled.js

@@ -13,7 +13,7 @@ export const AboutHeaderContainer = styled(Box)`
 `;
 export const LinkRoute = styled(Link)`
   text-decoration: none;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-weight: ${props => props.selected ? "600" : "400"};
   font-size: 16px;
   line-height: 22px;

src/components/Header/Drawer/Drawer.styled.js

@@ -69,7 +69,7 @@ export const CloseIcon = styled(Close)`
 `
 export const DrawerOption = styled(Typography)`
   font-weight: 600;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryPurple};
   font-size: 18px;
   position: relative;
@@ -130,14 +130,14 @@ export const LogoutText = styled(Typography)`
   font-weight: 600;
   font-size: 14px;
   color: ${selectedTheme.primaryPurple};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   position: relative;
   left: -14px;
   top: -3px;
 `
 export const HeaderTitle = styled(Typography)`
   font-weight: 700;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 18px;
   color: ${selectedTheme.primaryDarkTextThird};
   position: absolute;
@@ -146,7 +146,7 @@ export const HeaderTitle = styled(Typography)`
 `
 export const MyUsername = styled(Typography)`
   font-size: 12px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryPurple};
   position: relative;
   top: 12px;

src/components/Header/Header.styled.js

@@ -13,7 +13,7 @@ export const SearchInput = styled(TextField)`
   flex: 3;
   max-width: 520px;
   margin-right: 30px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   @media (max-width: 1700px) {
     margin-left: 15%;
   }
@@ -108,7 +108,7 @@ export const UserName = styled(Typography)`
   color: ${selectedTheme.primaryPurple};
   padding-top: 5px;
   padding-right: 10px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-weight: 600;
   white-space: nowrap;
 `;
@@ -178,7 +178,7 @@ export const SearchInputMobile = styled(SearchInput)`
     top: 70px;
     height: 46px;
     left: -5px;
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     ${props => !props.shouldShow && `display: none;`}
     & div {
       background-color: white;

src/components/Icon/IconWithNumber/IconWithNumber.styled.js

@@ -15,5 +15,5 @@ export const Number = styled(Box)`
     font-size: 10px;
     bottom: 0;
     right: -5px;
-    font-family: "Open Sans";
+    font-family: "DM Sans";
 `

src/components/ItemDetails/Header/Header.styled.js

@@ -14,7 +14,7 @@ export const ButtonContainer = styled(Link)`
   gap: 12px;
 `;
 export const HeaderText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryPurple};

src/components/ItemDetails/ItemDetails.styled.js

@@ -23,7 +23,7 @@ export const OfferIconContainer = styled(Box)`
 `;
 
 export const OfferIconText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   margin-left: 7.2px;
 

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.styled.js

@@ -46,7 +46,7 @@ export const OfferInfo = styled(Box)`
 `;
 export const OfferTitle = styled(Typography)`
   margin-bottom: 12px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${(props) =>
     props.isMyProfile
       ? selectedTheme.primaryYellow
@@ -64,19 +64,19 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
 `;
 export const OfferLocation = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 export const OfferPIB = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${(props) =>
     props.isMyProfile
       ? selectedTheme.primaryDarkTextThird
@@ -92,34 +92,34 @@ export const OfferDetails = styled(Box)`
 `;
 
 export const OfferCategory = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 33%;
 `;
 export const OfferPackage = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferViews = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/Category/CategoryDetail.styled.js

@@ -8,7 +8,7 @@ export const DetailContainer = styled(Box)`
   flex-direction: row;
   align-items: center;
   gap: 7px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   margin-bottom: 7px;
@@ -26,7 +26,7 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${props => props.isMyProfile ? "white" : selectedTheme.primaryText};
   line-height: 16px;
   font-size: 16px;

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/PIB/PIBDetail.styled.js

@@ -8,7 +8,7 @@ export const DetailContainer = styled(Box)`
   flex-direction: row;
   align-items: center;
   gap: 7px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   margin-bottom: 7px;
@@ -26,7 +26,7 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${props => props.isMyProfile ? "white" : selectedTheme.primaryText};
   line-height: 16px;
   font-size: 16px;

src/components/ItemDetails/ItemDetailsHeaderCard/StatisticDetails/StatisticDetails.styled.js

@@ -19,7 +19,7 @@ export const BottomDetails = styled(Box)`
   }
 `;
 export const StatusText = styled(Grid)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   @media (max-width: 600px) {
     font-size: 12px;

src/components/Login/Description/LoginDescription.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const LoginDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 9px;
   width: 221px;
   font-style: normal;

src/components/Login/ErrorMessage/ErrorMessage.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 export const ErrorText = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   position: relative;
   top: -12px;
   height: 20px;

src/components/Login/Title/LoginTitle.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const LoginTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   width: 328px;
   height: 33px;
   text-align: center;

src/components/MarketPlace/Header/Header.styled.js

@@ -14,7 +14,7 @@ export const HeaderContainer = styled(Box)`
   align-items: center;
 `;
 export const HeaderLocation = styled(Box)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryPurple};
   font-weight: 700;
   line-height: 22px;
@@ -51,7 +51,7 @@ export const HeaderOptions = styled(Box)`
 export const HeaderSelect = styled(Select)`
   width: 210px;
   height: 35px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 3px;
   font-weight: 400;
   position: relative;
@@ -68,7 +68,7 @@ export const HeaderSelect = styled(Select)`
   }
 `;
 export const SelectItem = styled(MenuItem)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
 `;
 export const SelectOption = styled(Option)`
   @media (max-width: 600px) {
@@ -89,7 +89,7 @@ export const HeaderButtons = styled(Box)`
   margin-right: 40px;
 `;
 export const HeaderAltLocation = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   color: ${selectedTheme.primaryText};
   margin-left: 5px;
@@ -108,7 +108,7 @@ export const RefreshIcon = styled(Swaps)`
   }
 `;
 export const MySwapsTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   color: ${selectedTheme.primaryDarkTextThird};
   position: relative;

src/components/MarketPlace/Offers/OffersNotFound.styled.js

@@ -13,14 +13,14 @@ export const OffersNotFoundContainer = styled(Box)`
 `;
 
 export const OffersNotFoundHeading = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 72px;
   font-weight: 700;
   color: ${selectedTheme.primaryPurple};
 `;
 
 export const OffersNotFoundDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   color: #818181;
   margin: 9px 0 46px 0;

src/components/Paging/Paging.styled.js

@@ -6,7 +6,7 @@ import { ReactComponent as DownArrow } from "../../assets/images/svg/arrow-down.
 export const PagingContainer = styled(Box)`
   width: calc(100% / 12 * 8.5);
   text-align: center;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   display: flex;
   flex: 1;
   justify-content: center;
@@ -79,7 +79,7 @@ export const PageNumber = styled(Box)`
   font-weight: 600;
   font-size: 16px;
   line-height: 18px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   height: 40px;
   min-width: 40px;
   max-width: 40px;
@@ -114,7 +114,7 @@ export const ThreeDots = styled(Box)`
   font-weight: 600;
   font-size: 16px;
   line-height: 18px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   height: 40px;
   min-width: 40px;
   max-width: 40px;

src/components/Popovers/HeaderPopover/HeaderPopover.styled.js

@@ -19,7 +19,7 @@ export const PopoverTitle = styled(Typography)`
   color: white;
   width: 100%;
   min-width: 270px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
 `;
 export const PopoverList = styled(List)`
   width: 100%;
@@ -40,7 +40,7 @@ export const PopoverListItemProfileAvatar = styled(ProfileAvatar)`
 export const PopoverListItemAvatarContainer = styled(ListItemAvatar)``;
 export const PopoverButton = styled(Button)`
   color: ${selectedTheme.primaryPurple};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-weight: 600;
   font-size: 12px;
   text-align: right;
@@ -83,5 +83,5 @@ export const PopoverNoItemsText = styled(Typography)`
   font-weight: 600;
   padding-top: 5px;
   font-size: 13px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
 `;

src/components/Popovers/PhonePopover/PhonePopover.styled.js

@@ -26,7 +26,7 @@ export const PhoneLabel = styled(Box)`
   text-align: center;
   align-items: center;
   display: flex;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   position: relative;
   left: 18px;
   top: 5px;
@@ -35,7 +35,7 @@ export const PhoneNumber = styled(Box)`
   position: relative;
   left: 18px;
   top: 5px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-weight: 600;
   font-size: 16px;
   line-height: 22px;

src/components/Prices/Plan/Plan.styled.js

@@ -19,7 +19,7 @@ export const PlanContainer = styled(Box)`
     props.highlighted && `box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.12);`}
 `;
 export const PlanTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-weight: 600;
   font-size: 24px;
   line-height: 33px;
@@ -33,7 +33,7 @@ export const PlanTitle = styled(Typography)`
       : selectedTheme.primaryPurple};
 `;
 export const PlanTitleDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -52,7 +52,7 @@ export const PlanPriceContainer = styled(Box)`
   gap: 9px;
 `;
 export const PlanPrice = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 600;
   font-size: 24px;
@@ -63,7 +63,7 @@ export const PlanPrice = styled(Typography)`
     props.highlighted ? "white" : selectedTheme.primaryPurple};
 `;
 export const PlanPriceMonthly = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 600;
   font-size: 24px;
@@ -81,7 +81,7 @@ export const PlanDetail = styled(Box)`
   gap: 6px;
 `;
 export const PlanDetailTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 600;
   font-size: 16px;
@@ -92,7 +92,7 @@ export const PlanDetailTitle = styled(Typography)`
       : selectedTheme.primaryPurple};
 `;
 export const PlanDetailDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 100;
   font-size: 16px;
@@ -109,7 +109,7 @@ export const Line = styled(Box)`
 export const BuyButton = styled(PrimaryButton)`
   text-align: center;
   margin-top: 18px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 600;
   font-size: 12px;

src/components/Prices/PricesComponent.styled.js

@@ -22,7 +22,7 @@ export const TruckIcon = styled(Truck)``;
 export const CartIcon = styled(Cart)``;
 export const SendIcon = styled(Send)``;
 export const PricesAltText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 16px;

src/components/Prices/PricesHeader/PricesHeader.styled.js

@@ -4,7 +4,7 @@ import selectedTheme from "../../../themes";
 import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
 
 export const PricesHeaderTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 700;
   font-size: 72px;
@@ -34,7 +34,7 @@ export const ButtonContainer = styled(Link)`
 `;
 export const LinkText = styled(Typography)`
   border-bottom: 1px dotted ${selectedTheme.primaryPurple};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryPurple};

src/components/PrivacyPolicy/PrivacyPolicyHeader/PrivacyPolicyHeader.styled.js

@@ -5,7 +5,7 @@ export const PrivacyPolicyHeaderContainer = styled(Box)`
   margin: 72px;
 `;
 export const PrivacyPolicyHeaderTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 700;
   font-size: 72px;
@@ -13,7 +13,7 @@ export const PrivacyPolicyHeaderTitle = styled(Typography)`
   color: ${selectedTheme.primaryPurple};
 `;
 export const PrivacyPolicyHeaderParagraph = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 16px;

src/components/PrivacyPolicy/PrivacyPolicySection/PrivacyPolicySection.styled.js

@@ -6,7 +6,7 @@ export const PrivacyPolicySectionContainer = styled(Box)`
     margin-top: 25px;
 `;
 export const PrivacyPolicySectionTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 600;
   font-size: 24px;
@@ -15,7 +15,7 @@ export const PrivacyPolicySectionTitle = styled(Typography)`
   margin-bottom: 18px;
 `;
 export const PrivacyPolicySectionText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 16px;

src/components/Profile/Header/Header.styled.js

@@ -18,7 +18,7 @@ export const ButtonContainer = styled(Link)`
   gap: 12px;
 `;
 export const HeaderText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryPurple};

src/components/Profile/ProfileOffers/NoProfileOffers.js/NoProfileOffers.styled.js

@@ -17,7 +17,7 @@ export const NoProfileOffersIcon = styled(HalfLogo)`
     width: 100%;
 `
 export const NoProfileOffersMainText = styled(Typography)`
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-weight: 700;
     font-size: 24px;
     text-align: center;
@@ -26,7 +26,7 @@ export const NoProfileOffersMainText = styled(Typography)`
     line-height: 33px;
 `
 export const NoProfileOffersAltText = styled(Typography)`
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 16px;
     color: ${selectedTheme.primaryGrayText};
     text-align: center;

src/components/Profile/ProfileOffers/ProfileOffers.styled.js

@@ -25,7 +25,7 @@ export const ProfileOffersContainer = styled(Box)`
 `;
 export const HeaderTitle = styled(Typography)`
   font-size: 16px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryDarkTextThird};
   position: relative;
   margin-left: 10px;
@@ -70,7 +70,7 @@ export const IconContainer = styled(Icon)`
 export const HeaderSelect = styled(Select)`
   width: 210px;
   height: 35px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 3px;
   font-weight: 400;
   position: absolute;

src/components/ProfileCard/EditProfile/EditProfile.styled.js

@@ -43,7 +43,7 @@ export const ProfileImagePicker = styled(ImagePicker)`
 `;
 
 export const ProfileHeader = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 24px;
   font-weight: 700;
   margin-top: 9px;
@@ -134,7 +134,7 @@ export const ButtonsContainer = styled(Box)`
 
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   position: relative;
   top: 20px;
   font-size: 14px;

src/components/ProfileCard/ProfileCard.styled.js

@@ -63,7 +63,7 @@ export const ProfileCardWrapper = styled(Card)`
 //       : selectedTheme.primaryPurple};
 //   font-weight: 700;
 //   font-size: 24px;
-//   font-family: "Open Sans";
+//   font-family: "DM Sans";
 //   margin-bottom: 5px;
 //   @media (max-width: 600px) {
 //     font-size: 18px;
@@ -74,7 +74,7 @@ export const ProfileCardWrapper = styled(Card)`
 //   color: ${(props) =>
 //     props.isMyProfile ? "white" : selectedTheme.primaryDarkText};
 //   margin-top: 0.18rem;
-//   font-family: "Open Sans";
+//   font-family: "DM Sans";
 //   font-size: 16px;
 //   padding-top: 1px;
 //   @media (max-width: 600px) {
@@ -122,7 +122,7 @@ export const ProfileCardWrapper = styled(Card)`
 //   color: ${(props) =>
 //     props.isMyProfile ? "white" : selectedTheme.primaryDarkText};
 //   display: unset;
-//   font-family: "Open Sans";
+//   font-family: "DM Sans";
 //   letter-spacing: 0.02em;
 //   font-size: 16px;
 //   position: relative;
@@ -137,7 +137,7 @@ export const ProfileCardWrapper = styled(Card)`
 //   margin-right: 2rem;
 //   display: unset;
 //   margin-left: 1rem;
-//   font-family: "Open Sans";
+//   font-family: "DM Sans";
 //   font-size: 16px;
 //   margin-bottom: 2px;
 //   @media (max-width: 600px) {
@@ -180,7 +180,7 @@ export const ProfileCardHeader = styled(Grid)`
 
 export const HeaderTitle = styled(Typography)`
   font-size: 16px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryDarkTextThird};
   position: relative;
   @media (max-width: 600px) {

src/components/ProfileCard/ProfileContact/ProfileContact.styled.js

@@ -32,7 +32,7 @@ export const ContactItem = styled(Typography)`
   color: ${(props) =>
     props.isMyProfile ? "white" : selectedTheme.primaryDarkText};
   display: unset;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   letter-spacing: 0.02em;
   font-size: 16px;
   position: relative;

src/components/ProfileCard/ProfileMainInfo/ProfileMainInfo.styled.js

@@ -39,7 +39,7 @@ export const ProfileName = styled(Typography)`
       : selectedTheme.primaryPurple};
   font-weight: 700;
   font-size: 24px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-bottom: 5px;
   @media (max-width: 600px) {
     font-size: 18px;
@@ -70,7 +70,7 @@ export const ProfilePIB = styled(Typography)`
   color: ${(props) =>
     props.isMyProfile ? "white" : selectedTheme.primaryDarkText};
   margin-top: 0.18rem;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   padding-top: 1px;
   @media (max-width: 600px) {

src/components/ProfileCard/ProfileStats/ProfileStats.styled.js

@@ -24,7 +24,7 @@ export const StatsItem = styled(Typography)`
   margin-right: 2rem;
   display: unset;
   margin-left: 1rem;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   margin-bottom: 2px;
   @media (max-width: 600px) {

src/components/ProfileMini/ProfileMini.styled.js

@@ -23,7 +23,7 @@ export const ProfileHeaderIconContainer = styled(Box)`
   }
 `;
 export const ProfileHeaderText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   margin-left: 7.2px;
 

src/components/Radio/Button/RadioButton.styled.js

@@ -27,7 +27,7 @@ export const FormControlLabelStyled = styled(FormControlLabel)`
     `}
   margin-right: 0;
   & label {
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     font-size: 12px;
   }
   & span:nth-child(1) svg {

src/components/Select/Select.styled.js

@@ -8,7 +8,7 @@ export const SelectStyled = styled(Select)`
     padding: 2px;
     font-size: 16px;
     font-weight: 600;
-    font-family: "Open Sans";
+    font-family: "DM Sans";
     cursor: pointer;
     & fieldset {
         border-color: ${props => props.borderColor ? props.borderColor : selectedTheme.primaryPurple} !important;

src/components/StepProgress/StepProgress.styled.js

@@ -30,7 +30,7 @@ export const StepBar = styled(Box)`
       ? selectedTheme.primaryPurple
       : selectedTheme.primaryDarkGrayText};
   border-radius: 100%;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-align: center;
   border: 5px solid
     ${(props) =>

src/components/Styles/globalStyles.js

@@ -4,7 +4,7 @@ import { createGlobalStyle } from 'styled-components';
 // import Mulish from "./fonts/Mulish-Regular.ttf"
 const GlobalStyle = createGlobalStyle`
   ${'' /* @font-face {
-    font-family: 'Open Sans';
+    font-family: 'DM Sans';
     src: url(${OpenSans}) format('truetype');
     font-weight: 400;
     font-style: normal;

src/components/TextFields/TextField/TextField.js

@@ -101,5 +101,5 @@ TextField.defaultProps = {
   italicPlaceholder: false,
   showAnimation: false,
   height: "48px",
-  // font: "Open Sans"
+  // font: "DM Sans"
 };

src/components/UserReviews/NoReviews/NoReviews.styled.js

@@ -7,7 +7,7 @@ export const NoReviewsContainer = styled(Box)`
 export const NoReviewsText = styled(Typography)`
   color: ${selectedTheme.primaryPurple};
   font-size: 24px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-align: center;
   font-weight: 700;
   width: 100%;
@@ -16,7 +16,7 @@ export const NoReviewsText = styled(Typography)`
 export const NoReviewsAltText = styled(Typography)`
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-align: center;
   width: 100%;
   margin-bottom: 36px;

src/components/UserReviews/UserReviews.styled.js

@@ -39,7 +39,7 @@ export const ReviewsHeader = styled(Grid)`
 `;
 
 export const ReviewsTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   @media (max-width: 600px) {
     font-size: 12px;
@@ -81,7 +81,7 @@ export const NoReviewsContainer = styled(Box)``;
 export const NoReviewsText = styled(Typography)`
   color: ${selectedTheme.primaryPurple};
   font-size: 24px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-align: center;
   font-weight: 700;
   width: 100%;
@@ -89,7 +89,7 @@ export const NoReviewsText = styled(Typography)`
 export const NoReviewsAltText = styled(Typography)`
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   text-align: center;
   width: 100%;
   margin-bottom: 36px;
@@ -112,13 +112,13 @@ export const ReviewQuote = styled(Grid)`
 export const ThumbBox = styled(Grid)``;
 export const ReviewQuoteBox = styled(Grid)``;
 export const ReviewQuoteText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
 `;
 export const ReviewDetails = styled(Grid)``;
 export const ReviewDetailsText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryDarkText};
   font-style: italic;
@@ -132,6 +132,6 @@ export const ReviewDetailsValue = styled(Typography)`
 export const ProfileName = styled(Typography)`
   font-weight: 600;
   font-size: 16px;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
 `;
 export const ReviewContainer = styled(Box)``;

src/pages/CreateOffer/CreateOffer.styled.js

@@ -10,7 +10,7 @@ export const CreateOfferContainer = styled(Container)`
   align-items: center;
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   width: 328px;
   height: 33px;
   text-align: center;
@@ -24,7 +24,7 @@ export const CreateOfferTitle = styled(Typography)`
   margin-bottom: 40px;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 9px;
   width: 221px;
   font-style: normal;

src/pages/ErrorPages/NotFoundPage.styles.js

@@ -29,7 +29,7 @@ export const ErrorImageContainer = styled(Box)`
 `;
 
 export const ErrorHeading = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 72px;
   font-weight: 700;
   color: ${selectedTheme.primaryPurple};
@@ -40,7 +40,7 @@ export const ErrorHeading = styled(Typography)`
 `;
 
 export const ErrorMessage = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-size: 16px;
   font-weight: 400;
   color: #818181;

src/pages/ForgotPasswordPage/ForgotPassword.styled.js

@@ -15,7 +15,7 @@ export const ForgotPasswordPageContainer = styled(Container)`
   }
 `;
 export const ForgotPasswordTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   width: 328px;
   height: 33px;
   text-align: center;
@@ -28,7 +28,7 @@ export const ForgotPasswordTitle = styled(Typography)`
   margin-top: 36px;
 `;
 export const ForgotPasswordDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -47,7 +47,7 @@ export const FormContainer = styled(Box)`
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   position: relative;
   top: -7px;
   font-size: 14px;

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.styled.js

@@ -15,7 +15,7 @@ export const MailSentContainer = styled(Container)`
   }
 `;
 export const Title = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   width: 328px;
   height: 33px;
@@ -29,7 +29,7 @@ export const Title = styled(Typography)`
   margin-top: 6px;
 `;
 export const Description = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 9px;
   width: 279px;
   font-style: normal;
@@ -47,7 +47,7 @@ export const FormContainer = styled(Box)`
   height: 216px;
 `;
 export const StandardText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   font-size: 16px;
   padding-right: 6px;

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.styled.js

@@ -6,7 +6,7 @@ export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   display: flex;
@@ -26,7 +26,7 @@ export const RegisterDescription = styled(Typography)`
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   position: relative;
   top: -7px;
   font-size: 14px;

src/pages/RegisterPages/Register/Register.styled.js

@@ -32,7 +32,7 @@ export const RegisterPageContainer = styled(Container)`
   }
 `;
 export const RegisterTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   width: 328px;
   height: 33px;
   text-align: center;
@@ -47,7 +47,7 @@ export const RegisterTitle = styled(Typography)`
   }
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -96,7 +96,7 @@ export const Footer = styled(Box)`
   justify-content: center;
 `;
 export const FooterText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: #505050;
   text-align: center;
   width: 330px;
@@ -140,7 +140,7 @@ export const RegisterPageContent = styled(Box)`
 `;
 export const ErrorMessage = styled(Box)`
   color: red;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   position: relative;
   top: 5px;
   text-align: left;

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.styled.js

@@ -7,7 +7,7 @@ export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   display: flex;
@@ -26,7 +26,7 @@ export const RegisterDescription = styled(Typography)`
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   position: relative;
   top: -7px;
   font-size: 14px;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

@@ -6,7 +6,7 @@ export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   font-style: normal;
   font-weight: 400;
   display: flex;

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.styled.js

@@ -23,7 +23,7 @@ export const RegisterTitle = styled(Typography)`
   margin-top: 32px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 36px;
   width: 430px;
   font-style: normal;

src/pages/ResetPasswordPage/ResetPasswordPage.styled.js

@@ -15,7 +15,7 @@ export const ResetPasswordPageContainer = styled(Container)`
   }
 `;
 export const ResetPasswordTitle = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   width: 328px;
   height: 33px;
   text-align: center;
@@ -28,7 +28,7 @@ export const ResetPasswordTitle = styled(Typography)`
   margin-top: 36px;
 `;
 export const ResetPasswordDescription = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   margin-top: 9px;
   width: 270px;
   font-style: normal;
@@ -55,7 +55,7 @@ export const Footer = styled(Box)`
   justify-content: center;
 `;
 export const FooterText = styled(Typography)`
-  font-family: "Open Sans";
+  font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   padding-right: 6px;
   text-align: center;