16
votes
Accepted
How can I identify which text within a page is "too small to read" as reported by Google Search Console?
If you run a Lighthouse Audit in Chrome, under the "Document doesn't use legible font sizes" report it will show you the exact CSS selector that is causing the small text issue, and the ...
- 15.8k
8
votes
Accepted
How to Leverage Browser Caching for Fonts in WordPress
Your mime types don't match your ExpireByType directives:
$ curl --head https://milyin.com/wp-content/uploads/omgf/neve-google-font-poppins/poppins-normal-700.woff2
...
expires: Thu, 09 Sep 2021 13:24:...
- 98.4k
7
votes
Accepted
Custom font not loading
Ok here is how it should work.
The CSS
@font-face {
font-family: "BellGothicStd";
src: url("fonts/BellGothicStd-Black.otf") format("opentype");
}
h1 {
font-family: 'BellGothicStd', Arial, sans-...
- 2,400
7
votes
Can I use numbering to decorate headings for readability in CSS without hurting SEO?
Contrary to hurting SEO, I've found that placing numbers next to headings can help SEO in some cases.
More specifically, if you have a numbered list of things, sometimes it can qualify your site for ...
- 15.8k
7
votes
Accepted
How can I identify a font from an image and use it on my website?
There are several websites that have font-detection tools. Simply upload the image of your font and it will detect close matches. Just search "detect font from image" and you'll find them. ...
- 6,221
6
votes
How to Leverage Browser Caching for Fonts in WordPress
ExpiresDefault "access plus 2 days"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
...
- 42.7k
4
votes
Rendering of Raleway (Google Web Fonts) in Google Chrome browser
This is a known issue with Raleway and some versions of Chrome, it's related to anti-aliasing of fonts. This is a fix for windows, using SVG in the css
/*FIX FONT FOR GOOGLE CHROME ON WINDOWS*/
@...
- 378
4
votes
Accepted
What are the safe web fonts and is there anyway around this problem?
You can literality use any font you choose regardless whether or not they have the font installed on their OS. This is done by using CSS @font-face which informs the users browser to download the font ...
- 32.9k
4
votes
Site speed using web fonts - Self-hosted vs Google Fonts etc
Google compress their fonts for faster download and if you are using HTTP/1.1 then downloading the fonts from this seperate domain could also result in a performance improvement. Whether Google or ...
- 41
4
votes
Site speed using web fonts - Self-hosted vs Google Fonts etc
From a speed POV using Googles fonts will normally be faster as (a) they will be cached and lots of sites use them and (b) Google will effectively be using a CDN to provide high speed results.
There ...
- 7,650
4
votes
Can I use numbering to decorate headings for readability in CSS without hurting SEO?
The featured snippet in Google that Maximillian posted is a good example of where I would use numbered headings. Quick how-to guides, recipes, ranking, anything where the order of events actually ...
- 601
4
votes
Possible to add a new font to Google font?
You can read through the process of submitting a new font in the Google Fonts Guide.
This guide aims to help people navigate the requirements and
recommendations for contributing to Google Fonts. The ...
- 716
3
votes
Trying to determine why same font on two sites renders differently
Okay taking a quick look, I can see that letter spacing is definitely different which has a huge impact on the visual appearance of font.
On one site it's: letter-spacing: 0.7px;
On other site it's: ...
- 154
3
votes
Accepted
How to deny direct access to font files used in CSS?
Well this is already done as best it can by default.
When you try to access fonts from another domain your browser will block this s a cross origin request (unless you explicitly add a "Access-...
- 322
3
votes
Accepted
How to make sure Chinese text is rendered in webpage?
If the specified font doesn’t contain a glyph for a character, browsers typically use a fallback font to render this character.
(Browsers don’t have do this, of course, and how it exactly works ...
- 21.7k
3
votes
Why gzip compression not working on font file?
Personally, I would not even bother storing Ionicons locally because it is a common library that is hosted on public Content Delivery Networks (CDN).
Serving Ionicons from CDN JS in this case //cdnjs....
- 32.9k
3
votes
Can I use free fonts on a website which contains banners?
Yes.
Just check the license to make sure that it doesn't have a "Free for non-commercial use only" restriction.
- 1,608
3
votes
Are there concrete benefits in using png over fonts for icons?
One major advantage of using PNGs is showing icons with more than one color. Also it's well supported by older browsers, althrough the IE 6 will have problems with transparent PNGs.
You might want to ...
- 411
3
votes
How to host a custom font on Google Drive (non Google Font) for use on Blogger
You can grab the actual download link (see this reddit post) https://www.reddit.com/r/tabletopsimulator/comments/38h598/hosting_files_with_google_drive/
Basically, put the file id into the direct ...
- 31
3
votes
How can I identify which text within a page is "too small to read" as reported by Google Search Console?
The intermittency could simply be caused by field data of a few users who's browser portal is small or by periodic changes to Google's algorithm.
Have you looked at the page using your browser's ...
- 3,155
2
votes
Are there privacy considerations in using Google web fonts?
By embedding the font hosted by google, you are informing Google who your visitor is and that they are visiting your site (their interest), which is a privacy concern.
https://www.brycewray.com/posts/...
- 21
2
votes
Font File or Sprites for Icons
It comes down to size imo.
I use font awesome for local development and then once happy I will transform that either into a sprite or base64 whichever is smallest.
Font awesome is massive and most ...
- 216
2
votes
Is it possible to block webfont downloads but allow visitors to see them?
Well, this seems to be the only way. Really, all I (or anyone) can do is create layers of defense. Ah well.
2
votes
Accepted
Can I use an unlicensed font that is not sold anywhere?
It would be real headache for you if you were contacted by a lawyer who bought for a penny all copyrights from this defunct company and makes quick money as copyright troll.
My opinion: There are so ...
- 10.1k
2
votes
Accepted
Enabling compression for font loaded via googleapi
This is an issue with the test, not with anything you are supposedly doing wrong. From your screen-shot I can see that the potential size savings is only 526 bytes which is well within the size of a ...
- 2,271
2
votes
How do browsers handle multiple font-faces, when their source is the same?
Possible solution:
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans.ttf");
}
@font-face {
font-family: "DejaVu Sans";
src: url("...
- 1,067
2
votes
Accepted
License needed to use a custom web font
Of course you can not use a font you stole off a web site that the creator charges for and licenses. For the type foundry to sell a license, but not the font, would be bizarre at best. Just buy the ...
- 4,633
2
votes
Accepted
Which web font supports all languages?
Most fonts support most human languages.
The problem with that page is that the text is encoded using UTF-8 but the page claims it is encoded using windows-1252.
Browsers are therefore following ...
- 1,608
2
votes
Would a long article using SVG rendered letters (rather than a font) be performant (usable and scrollable)?
Tried it out. Took about ~5 seconds to render 10,000 icons as inline svgs locally, and scrolling flashes white a little bit. Didn't do any optimization, don't really know what could be done, but doesn'...
- 521
2
votes
How to deny direct access to font files used in CSS?
The simple answer is... you can't...
Browsers download font files by default by visiting your site as they need those files to be able to render your custom fonts. The font types eot, woff, opentype ...
- 32.9k
Only top scored, non community-wiki answers of a minimum length are eligible