Comments (16)
@BolajiAyodeji the github issue to create the typography page will show just 2 fonts Ubuntu and Avenir as specified by the design lead @perriefidelis
from osf-website.
Done! 👍
from osf-website.
@BolajiAyodeji should the page look exactly like this
The essence of this issue is to have the classNames ready for all typography and colors and I think you've started implementing this already from your last ticket. Just implement all on the style guide and documnent it similarly on this page. Sounds good?
Yes sounds good. I will do this
from osf-website.
Thank you @BolajiAyodeji . I am looking at working on this and moving to the next issue today. @perriefidelis please can the font files be provided soon
from osf-website.
Please can I be assigned to this @alabobriggs
from osf-website.
@BolajiAyodeji should the page look exactly like this
from osf-website.
The design guide doesn't show how the font sizes should differ on screen sizes. How do I implement responsiveness
from osf-website.
@BolajiAyodeji should the page look exactly like this
The essence of this issue is to have the classNames ready for all typography and colors and I think you've started implementing this already from your last ticket. Just implement all on the style guide and documnent it similarly on this page. Sounds good?
from osf-website.
The design guide doesn't show how the font sizes should differ on screen sizes. How do I implement responsiveness
We are yet to receive the design for other screen sizes, let's chill a bit for the design team.
cc @perriefidelis
from osf-website.
Issues with the typography styleguide
- Loading 4 different fonts on the web page will cause waste of resource as not all 4 will be used
- Adding one font with different font weight is rated as slow while using google fonts, adding more than 2 fonts as much as 4 wont be alright.
- The way tailwind.css allows custom font families is by adding an array of font families in
tailwind.config.js
file eg.
theme: {
...
fontFamily: {
display: ['"source sans"', "avenir", "gotham", "ubuntu"],
body: ['"source sans"', "avenir", "gotham", "ubuntu"]
},
...
}
and it will be used in the app by adding the apply tag in style,css
file eg.
html {
@apply font-body;
}
if the above is implemented a text components will check through the fonts that are available on the users pc if we don't use google fonts.
I have been researching on adding individaul font family for a text component but I havn't seen any yet.
from osf-website.
@BolajiAyodeji please I need assistance on this issue
from osf-website.
Hey @alabobriggs, apologies for the delayed response.
You don't need to load all the fonts, we'll just load the one(s) needed for the website effectively as seen in the prototype.
Hey @perriefidelis, do we need all the fonts on the website and can you provide us with the font files in all types?
Alternatively, you can use Web Fonts.
Web fonts are a CSS feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it.
@font-face {
font-family: Avenir;
src: url('fonts/avenir.woff2') format('woff2'),
}
h1 {
font-family: Avenir;
}
For more research: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
from osf-website.
Hey @alabobriggs, apologies for the delayed response.
You don't need to load all the fonts, we'll just load the one(s) needed for the website effectively as seen in the prototype.
Hey @perriefidelis, do we need all the fonts on the website and can you provide us with the font files in all types?
Alternatively, you can use Web Fonts.
Web fonts are a CSS feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it.
@font-face { font-family: Avenir; src: url('fonts/avenir.woff2') format('woff2'), } h1 { font-family: Avenir; }For more research: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
the only fonts needed for the website are: Avenir and Ubuntu
from osf-website.
@BolajiAyodeji the github issue to create the typography page will show just 2 fonts Ubuntu and Avenir as specified by the design lead @perriefidelis
Thanks !
from osf-website.
Just opened a pull request @BolajiAyodeji for this issue. Kindly review.
from osf-website.
Hey, there! 👋 This issue has been marked as stale and would be closed. Feel free to open it again if you have more questions 👍
from osf-website.
Related Issues (20)
- Add speakers page HOT 1
- Add travel guide page HOT 1
- Add Sustain Africa 2022 page
- Update README and contributors guide
- Setup and test semantic releases HOT 1
- Make navigation fixed HOT 1
- Fix storybook component issues HOT 1
- Become a sponsor button HOT 1
- Add Call for Speaker link HOT 1
- Add Nav Item for Desktop and Mobile HOT 2
- Update the Homepage Design HOT 9
- Design and Add the Schedule Page HOT 2
- Create the Sustain Event Page HOT 3
- Add the Travel page HOT 14
- Create the Thank You Page HOT 2
- Add the FAQ page HOT 4
- Fix travel page design HOT 4
- Fix URLs
- Fix: Navbar Background Color Overflow HOT 3
- Update speaker and Sponsors List
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from osf-website.