X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

FF keeps rendering text in BOLD instead of the font-weight set in CSS. Anyone else having this issue?

Kuphostiwe

I'm having this issue in Firefox where it's rendering all of the Google fonts on two websites I've created as BOLD instead of THIN or REGULAR or whatever else they're set to in the CSS. I've found many instances online of users reporting this and similar issues over the past few years and have tried a number of solutions. Adding the following code as "extra CSS" to the Wordpress theme is the only thing that fixes it:

html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

Yet adding this code has caused other rendering issues on the site. Both sites I'm having this issue on look fine in Chrome and Safari btw. I've troubleshooted by clearing my caches, disabling the few plugins I have installed and switched to different WP themes by different developers but the problem persists. I tried changing FF settings too... disabling plugins and add-ons, switched themes and turned off hardware acceleration to no avail. It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine.

Attached are two examples of the issue. First is the correct rendering, second is the incorrect BOLD rendering of the same text. Any thoughts anyone?

I'm having this issue in Firefox where it's rendering all of the Google fonts on two websites I've created as BOLD instead of THIN or REGULAR or whatever else they're set to in the CSS. I've found many instances online of users reporting this and similar issues over the past few years and have tried a number of solutions. Adding the following code as "extra CSS" to the Wordpress theme is the only thing that fixes it: html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } Yet adding this code has caused other rendering issues on the site. Both sites I'm having this issue on look fine in Chrome and Safari btw. I've troubleshooted by clearing my caches, disabling the few plugins I have installed and switched to different WP themes by different developers but the problem persists. I tried changing FF settings too... disabling plugins and add-ons, switched themes and turned off hardware acceleration to no avail. It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine. Attached are two examples of the issue. First is the correct rendering, second is the incorrect BOLD rendering of the same text. Any thoughts anyone?
Ama-screenshot ananyekiwe

Okulungisiwe ngu o-o--LOKI--o-o

Eminye Imininingwane Yohlelo

Fakela amapulagi

  • Shockwave Flash 31.0 r0

Isisebenziso

  • Firefox 62.0.3
  • Umsebenzisi oyi-ejenti: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:62.0) Gecko/20100101 Firefox/62.0
  • I-URL Yokweseka: https://support.mozilla.org/1/firefox/62.0.3/Darwin/en-US/

Izandiso

  • Adblock Plus 3.3.1 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d})
  • Default Bookmark Folder 2.4.1 (default-bookmark-folder@gustiaux.com)
  • Disconnect 5.18.21 (2.0@disconnect.me)
  • Ghostery – Privacy Ad Blocker 8.2.4 (firefox@ghostery.com)
  • Privacy Badger 2018.10.3.1 (jid1-MnnxcxisBPnSXQ@jetpack)

I-Javascript

  • incrementalGCEnabled: True

Imidwebo

  • adapterDescription:
  • adapterDeviceID: 0x0fe0
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x10de
  • contentUsesTiling: True
  • crashGuards: []
  • driverDate:
  • driverVersion:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'disabled', u'log': [{u'status': u'available', u'type': u'default'}, {u'status': u'disabled', u'message': u'Disabled by pref', u'type': u'user'}], u'description': u'Compositing', u'name': u'HW_COMPOSITING'}, {u'status': u'unavailable', u'log': [{u'status': u'unavailable', u'message': u'Hardware compositing is disabled', u'type': u'default'}], u'description': u'OpenGL Compositing', u'name': u'OPENGL_COMPOSITING'}, {u'status': u'unavailable', u'log': [{u'status': u'opt-in', u'message': u'WebRender is an opt-in feature', u'type': u'default'}, {u'status': u'unavailable', u'message': u'Hardware compositing is disabled', u'type': u'runtime'}], u'description': u'WebRender', u'name': u'WEBRENDER'}, {u'status': u'available', u'log': [{u'status': u'available', u'type': u'default'}], u'description': u'Off Main Thread Painting', u'name': u'OMTP'}]}
  • info: {u'TileHeight': 1024, u'ApzWheelInput': 1, u'ApzDragInput': 1, u'ApzKeyboardInput': 1, u'ApzAutoscrollInput': 1, u'AzureFallbackCanvasBackend': u'none', u'TileWidth': 1024, u'AzureCanvasAccelerated': 0, u'AzureCanvasBackend': u'skia', u'AzureContentBackend': u'skia'}
  • numAcceleratedWindows: 0
  • numAcceleratedWindowsMessage: [u'']
  • numTotalWindows: 1
  • offMainThreadPaintEnabled: True
  • offMainThreadPaintWorkerCount: 3
  • usesTiling: True
  • webgl1DriverExtensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_depth_bounds_test GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_mirror_clamp GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
  • webgl1Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_sRGB EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context
  • webgl1Renderer: NVIDIA Corporation -- NVIDIA GeForce GTX 660M OpenGL Engine
  • webgl1Version: 4.1 NVIDIA-10.17.5 355.10.05.45f01
  • webgl1WSIInfo: CGL
  • webgl2DriverExtensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_depth_bounds_test GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_mirror_clamp GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
  • webgl2Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
  • webgl2Renderer: NVIDIA Corporation -- NVIDIA GeForce GTX 660M OpenGL Engine
  • webgl2Version: 4.1 NVIDIA-10.17.5 355.10.05.45f01
  • webgl2WSIInfo: CGL
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Basic
  • windowUsingAdvancedLayers: False

Okuthandwayo Okulungisiwe

Misc

  • Umsebenzisi JS: Cha
  • Ukufinyeleleka: Cha
user1929 72 izisombululo 290 izimpendulo
Kuphostiwe

Can you provide a link to the website?

Can you provide a link to the website?
jscher2000
  • Top 10 Contributor
8632 izisombululo 70600 izimpendulo
Kuphostiwe

o-o--LOKI--o-o said

It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine.

Can you give a link to a page demonstrating the problem? It would be interesting to see whether there is any unusual CSS that isn't used on, say, the Google Fonts example page for the same font (where presumably it looks normal to you).

''o-o--LOKI--o-o [[#question-1238866|said]]'' <blockquote>It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine. </blockquote> Can you give a link to a page demonstrating the problem? It would be interesting to see whether there is any unusual CSS that isn't used on, say, the Google Fonts example page for the same font (where presumably it looks normal to you).
cor-el
  • Top 10 Contributor
  • Moderator
17408 izisombululo 157261 izimpendulo
Kuphostiwe

You can use the Inspector to check what CSS rules are applied and what font is used in case a bold(er) font is being used. The Computed tab shows what rule(s) are present and active.

You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected.

You can check the font used for selected text in the Font tab in the right pane of the Inspector.

You can use the Inspector to check what CSS rules are applied and what font is used in case a bold(er) font is being used. The Computed tab shows what rule(s) are present and active. You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected. *https://developer.mozilla.org/en-US/Tools/Page_Inspector You can check the font used for selected text in the Font tab in the right pane of the Inspector. *https://developer.mozilla.org/en/Tools/Page_Inspector/How_to/View_fonts

Umnikazi wombuzo

Thanks for the replies guys. Here's a link to my own website where I've disabled the extra CSS-fix so that the entire site renders bold.

http://neptunemedia.net/

I'm going to dive into the Inspector this morning and spend some time trying to figure out what CSS rules are being applied and why my font-weight specifications are being overwritten.

I'm very familiar with the Inspector and use it frequently. Feel free to check it out yourselves if you have time... perhaps one of you can see something I'm not seeing.

Thanks!

Thanks for the replies guys. Here's a link to my own website where I've disabled the extra CSS-fix so that the entire site renders bold. [http://neptunemedia.net/] I'm going to dive into the Inspector this morning and spend some time trying to figure out what CSS rules are being applied and why my font-weight specifications are being overwritten. I'm very familiar with the Inspector and use it frequently. Feel free to check it out yourselves if you have time... perhaps one of you can see something I'm not seeing. Thanks!
jscher2000
  • Top 10 Contributor
8632 izisombululo 70600 izimpendulo
Kuphostiwe

[WORKING NOW, NEVER MIND THIS POST]

[WORKING NOW, NEVER MIND THIS POST]

Okulungisiwe ngu jscher2000

Umnikazi wombuzo

FYI, if anyone checks out my website and it looks completely messed up, I'm deactivating almost all plugins to see if any of them are the cause of the problem.

FYI, if anyone checks out my website and it looks completely messed up, I'm deactivating almost all plugins to see if any of them are the cause of the problem.

Umnikazi wombuzo

jscher2000.... LOL... figures someone would be on this immediately, right when I'm messing around with plugins. As soon as I determine none are the problem, I'll post another message saying the site is fully back up and running.

jscher2000.... LOL... figures someone would be on this immediately, right when I'm messing around with plugins. As soon as I determine none are the problem, I'll post another message saying the site is fully back up and running.

Umnikazi wombuzo

I've determined it's not a plugin issue. The site is back up and fully running.

I've determined it's not a plugin issue. The site is back up and fully running.
jscher2000
  • Top 10 Contributor
8632 izisombululo 70600 izimpendulo
Kuphostiwe

The Lato (or Lato Light) font used on your site looks different from the example you posted originally.

Anyway, considering that the rules at issue are for MacOS only, I might not be able to help (as a Windows user).

The Lato (or Lato Light) font used on your site looks different from the example you posted originally. Anyway, considering that the rules at issue are for MacOS only, I might not be able to help (as a Windows user).

Umnikazi wombuzo

Yeah I posted sample text from another site of mine. Thanks anyway.

Yeah I posted sample text from another site of mine. Thanks anyway.
jscher2000
  • Top 10 Contributor
8632 izisombululo 70600 izimpendulo
Kuphostiwe

Can you do a comparison between how Lato or Lato Light looks for you on your site vs. how it looks on Google's page?

https://fonts.google.com/specimen/Lato

Can you do a comparison between how Lato or Lato Light looks for you on your site vs. how it looks on Google's page? https://fonts.google.com/specimen/Lato