How To Download Hindi Font In Mobile

0 views

Skip to first unread message

Azucena Jewels

unread,

Aug 3, 2024, 2:32:37 PM8/3/24

to imeradfe

I found a tutorial that helped me finally get the font sizing right - at least it almost did. I'm having to resize all my fonts to work on the mobile site. I was able to change my h3 font size with the following code in the screenshot below. Still following the tutorial to a tee, I tried changing the paragraph font size next. I have tried "p" and "p3" and neither change the size of the font (both of the fonts above and below "YOUR WEDDING VIDEOGRAPHER" are p3.

Hi all. I'm a CSS newbie, but am starting to get the hang of it. Have made a few customizations that have worked thus far to both the standard and mobile site. I don't know if any of those customizations are overriding what I'm trying to do with the mobile menu font size, which is too big and I just want to bring it down a notch.

Hi!
I am also trying to change the sizing of my menu in the mobile version, but the coding here doesn't work for me. How do I do?

Site's URL:
spinach-sprout-hgc2.squarespace.com

(OR www.medvetenkultur.org if the domain connection has been made. In that case the password would be medvetenkultur)

I am having problems controlling font-size for mobile and desktop in a Cornerstone site. I have read a lot of related Apex posts, and I do not think I have a clear understanding of the site options for Typography. I am not using CSS in my attempts at control.

In this article, we're going to discuss the Text Element and its settings. The Text Element is the main building block to add text and paragraphs in pages created in either Cornerstone or Pro's Content Builder (can also be used in Footer and Header...

1- You can use the Responsive text tricks and set the font size in a way that it will be responsive. You can learn about that here.
2- You can hide the element that you used in Cornerstone for mobile and add another element and set the font smaller. Please kindly click here for more information on how to hide elements in various viewports.
3- You need to use custom CSS code to force the smaller font size. (This is customization and outside of our support scope.)

As a sample check this screencast showing you the font calculation. On the first part was my Root font size settings. Then on the element itself, I have 1 em value, which means 16px based on my root font size LG settings. There was so many em units that might be the possible fallback if it is not set on the element. You can see it become 18px. It is because of the REM units calculation. Knowing this step by step computation of the browser too will help you understand how the font became too large: -o-matic.com/watch/cYf36EAXih

When I view my prototype via the XD mobile app I get fonts missing. I'm using Roboto, something my Android device should find attractive and my prototype is generated from an updated XD on W10 OS. When I preview the same mobile layout on desktop the font is not missing, however I get another font missing message that regards a totally different font that I'm not using in that prototype at all, as I'm only using Roboto for this project.

If you don't mind me taking a guess about this, there is Roboto in TypeKit, and there is Roboto from various other places that you can add to Windows 10. Although they have exactly the same name, Adobe may only be embedding the ones that are licensed via TypeKit.

There is something slightly confusing on that page, there's an option to sync each version of the font, and a sync all, and an add to kit option. I think add to kit is for when using the font on a web site. I used the sync all option, and it seemed not to work, so then I did just the sync on Robot Regular, and that worked.

I don't get any typeface from typekit as I don't like that concept for many reasons. All of my typefaces are installed locally and my licensed fonts are all bought from vendors directly. Seems to me that XD handles type quite instable, as mentioned it gives me a different font missing message when previewed in desktop mode and another when previewed on a mobile. I thought XD embeds all the fonts used in a project automatically for prototype preview? Doesn't seem like it to be honest.

I remember watching an Adobe Demo which said that the mobile XD app is actually XD running on a mobile device, which seemed to imply some interesting things for the future (although I could have been reading more into that than was intended).

If that's correct it will be impossible to show a hifi prototype on any mobile device, it's not like I can control what typefaces are installed on my mobile device. Are there no way to objectify types in XD so they get rendered as objects instead of fonts? I mean, that's a very dirty and non sustainable way to workaround the issue but at least that get's the autentic type going in the Ui. Other than that I think it's odd that my Samsung Android mobile don't have Androids own "brand type" Roboto installed?

I think Adobe XD should find a workaround for this. God knows how many mobile projects I have going with different brand types that the client have made WOF formats for. I really need to see hifi prototypes with authentic typefaces on authentic device.

any development on this subject? I convinced my company to use variable fonts for our new responsive website and I have just noticed I can't even look at it on my mobile, the font is missing so there's no way to measures anything visually. I'm absolutely stunned that the fonts are not embedded on live previews...

Can anyone provide an actual solution to this issue, or any progress regarding solving this issue ?

@Dan Rodney Are there any plans by adobe developers on solving this issue ? It has been more than 3 years and i am still facing this issue

I use the share link, instead of the XD phone app. Open the mockup in my mobile browser and zoom in/out as needed. Not ideal but it's much easier than installing fonts on your phone for every different project, eff that

Hey there! Normally, the smaller site is still using the same code as the desktop site, which is why the changes involved would cover both. However, our Community here may be able to lend a hand in customizing just how that code is handled to fir your needs.

It can be added to the bottom of your main CSS file or in the SEO Settings for each page. If you are using different header types (other than splash in the above example) you'll need add additional rules for each page type you want to override. Also, I used 40% as a radical figure to test its effect, that would probably be too small, but you can make that decision.

Thanks so much, that has helped a lot. The only problem remaining (which is actually part of the same issue), is that the spacers which I have used to appropritely format the desktop version, are also much too big when translated to the mobile version. So a user needs to scroll down practically a whole page length's worth in order to reach the main body text after the page title and sub-heading. Does that make sense? You can see what I mean if you access www.natco-select.com/oadby on a mobile device.

surely all of this should be built into weebly as a design site, created to help people design their own websites for use on both phones and computers? As an average computer user who has no idea about codes, I shouldn't have to painfully try and find a code from the community and apply it, hoping it is the right one to resize my text which is much too large on my phone?

I think it is not a very good move in order to have a good UX. When I come to my colleague at work (he is UX designer as well) with a problem about how the content looks on mobile, he always told me to reduce the font size. I am keen on keeping the same size with maybe a little font size reduction for titles.

Sounds like your coworker is using Material Design guidelines; they recommend not going smaller than 12sp (scalable pixels) for mobile. Whether this is a good practise to follow depends on two factors: the font you use and the device that the website will be viewed on. Different fonts have different characteristics when it comes to readability, while each device has a different pixel density.

Ideally, font size should be responsive and scalable, but I recommend not using sizes smaller than 16 px for body text. Depending on the font, many users will start to have to put in more effort to read at the 12-14 px size mark. Sure they can still read it, but it's not exactly good accessibility.

By default, the browser will display each font at 16px (CSS pixels). This is a good default for most cases, but may need to be adjusted for a specific font - i.e. the default size can be set lower or higher to accommodate for the different properties of the font. Then, once the default size is set, larger and smaller fonts should be defined relative to the default size using pixels. These can then be used to adjust size of the text for primary, secondary, and other type of content on the page.

Generally, you sit further away from the screen when you're viewing a larger desktop / laptop than you do when viewing on a mobile. An 18pt character will take up more space in your vision if it's closer to you than if it's further away.

The further away you hold the text, the smaller it becomes visually. You need to make the text size bigger the further away the text is read, to compensate for a larger reading distance. How big is, again, a science in itself. If you are inexperienced, a useful trick is to hold a well-printed book at a comfortable reading distance while looking at your website to compare.

On a 5 inch 1280720 px phone screen, a single pixel should be about 0,0864 mm wide. But here comes that Supporting Multiple Screens article on Android Developers website that says that device independent pixel size on Android can be calculated from the following equation: