Merge pull request #3 from Merck/feature/remove-fonts

Feature/remove fonts

Author: michaelTurnbach

README.md

@@ -198,3 +198,84 @@ Linea should now be available in your web browser at [http://localhost:3000](htt
 ##### Note
 If you receive an error with Google Oauth after the server has been started and you attempt to log in, regenerate client id and client secret and edit the `google_oauth.yml` file as per the oauth section of the [deployment instructions](./linea_docs/linea_deployment_instructions.md).
 
+
+## Customizing Fonts
+
+Linea uses custom fonts defined in the CSS files. To add your own custom fonts, follow these steps:
+
+### 1. Adding Font Files to the Public Directory
+
+Create a fonts directory in the public folder and add your font files:
+
+```bash
+# Create the fonts directory
+mkdir -p public/fonts
+
+# Copy your font files to the directory
+# Example: cp /path/to/your/fonts/* public/fonts/
+```
+
+Your font files should be in common web font formats such as:
+- `.woff` (Web Open Font Format)
+- `.woff2` (Web Open Font Format 2)
+- `.ttf` (TrueType Font)
+- `.eot` (Embedded OpenType)
+- `.svg` (Scalable Vector Graphics)
+
+### 2. Updating the CSS File
+
+Open the main CSS file at `app/assets/stylesheets/application.css.scss` and replace all instances of `"add-your-font"` with your actual font file names.
+
+The file currently contains placeholder `@font-face` declarations like this:
+
+```scss
+@font-face{
+  font-family:'add-your-font';
+  src: font-url('add-your-font');
+}
+```
+
+Replace these with your actual font declarations. For example, if you're using a font called "CustomFont":
+
+```scss
+@font-face{
+  font-family:'CustomFont-Regular';
+  src: font-url('CustomFont-Regular.woff2') format('woff2'),
+       font-url('CustomFont-Regular.woff') format('woff'),
+       font-url('CustomFont-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face{
+  font-family:'CustomFont-Bold';
+  src: font-url('CustomFont-Bold.woff2') format('woff2'),
+       font-url('CustomFont-Bold.woff') format('woff'),
+       font-url('CustomFont-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+```
+
+### 3. Updating the Font Family Variable
+
+Also update the `$font-family-sans-serif` variable in the same file:
+
+```scss
+$font-family-sans-serif: "CustomFont-Regular", Helvetica Neue, Arial, Verdana, sans-serif;
+```
+
+### 4. Recompile Assets
+
+After making changes, recompile your assets:
+
+```bash
+rake assets:precompile
+```
+
+Then restart your Rails server for the changes to take effect.
+
+### Note on Asset Pipeline
+
+If you place fonts in `public/fonts/`, they will be served directly. Alternatively, you can place them in `app/assets/fonts/` to have them processed through the Rails asset pipeline. If using the asset pipeline approach, use `font-url()` helper without the full path, as Rails will automatically find fonts in the asset directories.
+

app/assets/stylesheets/application.css.scss

@@ -96,27 +96,27 @@ $modal-title-font-size: 18px;
 
 //Typography
 $navFontSize: 16px;
-$font-family-sans-serif: "UniversLTStdLight";
+$font-family-sans-serif: "add-your-font";
 
 @font-face{
-  font-family:'UniversLTStd';
-  src: font-url('UniversLTStd.otf');
+  font-family:'add-your-font';
+  src: font-url('add-your-font');
 }
 @font-face{
-  font-family:'UniversLTStdLight';
-  src: font-url('UniversLTStd-Light.otf');
+  font-family:'add-your-font';
+  src: font-url('add-your-font');
 }
 @font-face{
-  font-family:'UniversLTStdLightCond';
-  src: font-url('UniversLTStd-LightCn.otf');
+  font-family:'add-your-font';
+  src: font-url('add-your-font');
 }
 @font-face{
-  font-family:'UniversLTStdBold';
-  src: font-url('UniversLTStd-Bold.otf');
+  font-family:'add-your-font';
+  src: font-url('add-your-font');
 }
 @font-face{
-  font-family:'UniversLTStdCondensed';
-  src: font-url('UniversLTStd-Cn.otf');
+  font-family:'add-your-font';
+  src: font-url('add-your-font');
 }
 @font-face {
   font-family: 'Linea';
@@ -535,7 +535,7 @@ label {
     border-radius: 0;
     border: none;
     color: #FFF;
-    @include fontFamily('UniversLTStdLightCond');
+    @include fontFamily('add-your-font');
   }
 }
 
@@ -594,7 +594,7 @@ label {
   }
   .filter-section-title {
     margin-top: 20px;
-    @include fontFamily('UniversLTStdBold');
+    @include fontFamily('add-your-font');
     color: $filterSectionTitleColor;
   }
   input[type=checkbox] {
@@ -605,7 +605,7 @@ label {
     top: 5px;
 
     + label {
-      @include fontFamily('UniversLTStd');
+      @include fontFamily('add-your-font');
       color: $filterSectionTitleColor;
       /*text-transform: capitalize;*/
       max-width: 90%;
@@ -635,7 +635,7 @@ label {
 .related-datasets-container {
   .title {
     padding: 20px 0 5px;
-    @include fontFamily('UniversLTStdBold');
+    @include fontFamily('add-your-font');
     font-size: 18px;
     color: $secondaryTextColor;
     &:first-of-type {
@@ -694,7 +694,7 @@ label {
 .pagination {
   display: block;
   text-align: center;
-  @include fontFamily("UniversLTStdCondensed");
+  @include fontFamily("add-your-font");
   font-size: 18px;
   .previous_page {
     position: absolute;
@@ -709,7 +709,7 @@ label {
   }
 }
 .user-name {
-  @include fontFamily('UniversLTStd');
+  @include fontFamily('add-your-font');
   font-size: 14px;
   margin-right: 5px;
   div[class*="-activity"] & {
@@ -1171,7 +1171,7 @@ footer {
       background-color: $selectedColor;
     }
     a {
-      @include fontFamily("UniversLTStdLightCond");
+      @include fontFamily("add-your-font");
       font-size: 16px;
       color: #FFF;
     }
@@ -2045,4 +2045,4 @@ i.external-link-icon {
 
 .twitter-share-button {
   margin-bottom: -4px;
-}
+}