Download Font Roboto Family

1 view
Skip to first unread message

Edilma Howard

unread,
Aug 4, 2024, 6:43:28 PM8/4/24
to langcansali
Iwant to use Roboto Thin Google Webfont (weight 100) in a slightly tweaked version of the hyde-hyde theme. Google lists Roboto Thin and Thin Italic as included in the Roboto family, but the thinnest rendered appears to be weight 300 even though the CSS calls for 100.

Is it possible to include Roboto TTF font files in the Hugo directory structure? If so, where should they be put and what would be the URL to access them? Would just the URL for the Roboto normal file adequate for accessing all the other weights?


Hello, we are doing a course for some baltic languages and have had the problem with that Lato is missing some of the languages special characters. This would result in a diffrent font comming in for a single letter midsentence. This does not look great and previously we could fix this by going into the main.bundle.css and main.bundle.js to update the files..




This would make the course write over the use of Lato(quiz module and chapters) and just use Roboto. The and in code that use our custom fonts work fine..



Since the update and new code from the scorm exports these files do not exist anymore and i read that everything is supposed to be within the index.html



Great I thought, I could just update the root style..


Johan, that is a creative solution changing the font filenames, but I agree not the cleanest solution. These css variables can be kind of confusing, but I was able to use this code to change my ui font to Arial, I put this directly on the index page within the existing style tag. this changes all the 'ui' fonts- mostly the side navigation elements and some other labels.


Thanks Phil for this snippet of code. This helped me and sent me in the right direction, I just updated one of the css files from "lato, sans serif" to roboto and it seems like i have taken out Lato from the equation, everywhere.



Incase any articulate person reads this in the future:



Would love to be able to change the font family in the Rise UI before export so we dont end up with a font that cannot handle some special characters.

The custom fonts for headings and paragraphs work as intended, but things that are not affected from these and relay on the brand/font-family-ui needs a way to be changed.


Hi,

Sorry for the very late reply, in the Enfold theme the Roboto font is actually written as roboto, for example, if you want to only have this one product woocommerce tabs have this font, please try this css:


I have designed a screen and need to give font family as "RobotoBoldItalic". I added RobotoBoldItalic font file in resource folder. I tried assigning this to text , it's not reflecting. (The applied changes are not looking like Roboto family)


I will attach a sample OML below. First expression should be as Roboto font family . If you see that second expression it's "Merriweather" font family . It is working correctly . But not sure why Roboto is not working.


I tried using this same method, but still I cant able to get the output. As mentioned in above snapshots the same method I have used and also tried your ways. Still I can't able to achieve result for Roboto font family


I also tried using this same method, but still I cant able to get the output. As mentioned in above snapshots the same method I have used and also tried your ways. Still I can't able to achieve result for Roboto font family


Now I modify the fonts.css file created in step 3. Each font-family name, needs to be changed to match the respective font-family name used in index.html. So in the instance of 'Roboto Light':


I tested this by uninstalling the Elsie fonts from my local PC, forcing it to use the web fonts, and it worked. Further confirmation was made when not making the manual changes to the font-family failed to load the Elsie font.


The solution proposed by @ricardo.pascoal will work on the current (1.31.1) streamlit distribution with one modification to the css selector being used along with adding the !important modifier to the font-family.


Note: using body * will essentially override the font for every element. When that is not the desired effect you may want to inspect your page in a web editor and tweak your CSS selector to more refined targets. This becomes obvious when you look at st.code() code blocks as their monospace font will be replaced by your custom font.

In my case I noticed that all of the streamlit elements that I wanted my font to affect contained a class that starts with st-emotion. Therefor my CSS selector looks like the following:


These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.


These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.


These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.


These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.


Roboto is a font family designed by Christian Robertson for Google in 2011. It was originally intended to be the default font for Android devices, but it has since expanded to other platforms and projects. Roboto is inspired by classic grotesque fonts such as Helvetica and Arial, but it also features friendly and open curves that give it a humanistic touch. Roboto aims to be adaptable to different screen densities and resolutions, making it suitable for both digital and print media.


Roboto has a variety of weights and styles, ranging from thin to black, and from regular to condensed. The font also supports multiple languages and scripts, including Latin, Greek, Cyrillic, and Devanagari. Roboto has a neutral and balanced appearance, with a vertical stress and slightly rounded corners. It has a high x-height and generous spacing, which enhance its legibility and readability.


Roboto is a versatile font that can be used for many purposes, such as user interfaces, web design, logos, headlines, body text, and captions. It is especially popular among tech companies and startups, as it conveys a sense of modernity, efficiency, and innovation. Some examples of well-known brands that use Roboto are Google, YouTube, Spotify, Airbnb, and Nest. Roboto is also widely used by developers and designers who create apps and websites for Android devices.


Futura is a classic font that was designed by Paul Renner in 1927, inspired by the Bauhaus movement and the principles of geometry, simplicity, and harmony. It is one of the most influential fonts of the 20th century, and has been used for many iconic logos, posters, book covers, and film titles. Some examples of famous Futura users are Volkswagen, IKEA, FedEx, and NASA. Futura is a versatile font that can adapt to different moods and contexts, from elegant and sophisticated to playful and quirky.


Futura is a geometric sans-serif font that features crisp and angular shapes, uniform strokes, and minimal details. It has a large x-height, which makes it legible and clear at small sizes. It also has a wide range of weights and styles, from light and thin to bold and condensed. Futura is known for its distinctive letterforms, such as the circular O, the triangular A, and the squared-off E.


Futura is suitable for many design projects that require a modern, sleek, and professional look. It can be used for headlines, logos, signage, branding, and advertising. Futura also works well as a body text font, especially in its lighter weights and with generous spacing. Futura is compatible with most devices and platforms, and is widely available in both free and paid versions.


Gothic A1 is a sans-serif font designed by Korean type designer Changki Han. It was inspired by the classic Gothic fonts of the 19th and 20th centuries, such as Franklin Gothic and News Gothic. The font has nine weights, ranging from thin to black, and supports both Latin and Korean scripts. It is optimized for web and mobile devices, as well as print media.


Gothic A1 has a simple and modern look, with a balanced contrast between thick and thin strokes. The font has a high x-height and wide letterforms, making it easy to read at small sizes. The font also has some distinctive features, such as the curved tails of the lowercase g and y, the diagonal cuts of the uppercase A and V, and the rounded dots of the i and j.


Gothic A1 is a versatile font that can be used for various purposes, such as headlines, body text, captions, logos, and labels. The font is suitable for both formal and informal contexts, as it can convey a sense of professionalism, elegance, or simplicity depending on the weight and size. The font is especially popular for web design, as it can adapt to different screen resolutions and languages. Some examples of websites that use Gothic A1 are Google Fonts, Medium, and Airbnb.


Inria Serif is a serif typeface that was designed by Black[Foundry] for Inria, the French national institute for research in computer science and automation. The font was released under the SIL Open Font License in 2017 and is available on Google Fonts. Inria Serif has a humanist style, with low contrast, open counters, and generous proportions. It is intended to be used for long texts and complex typographic layouts, as well as for branding and identity design. It supports Latin, Greek, and Cyrillic scripts, and has extensive language coverage. Inria Serif is compatible with most devices and browsers, and can be paired with its sans serif counterpart, Inria Sans, for a coherent and versatile typographic system. Some of the most popular use cases for Inria Serif today are academic publications, digital magazines, and websites that require a sophisticated and elegant look.

3a8082e126
Reply all
Reply to author
Forward
0 new messages