The Browser Is Using Sans-serif Even Though Arial Is Available

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs The browser is using sans-serif even though Arial is available Ask Question Asked 8 years, 6 months ago Modified 8 years, 6 months ago Viewed 1k times 0

I'm working on a Wordpress website and from the console I can see that the font family for the text in the menu is font-family: Arial, Helvetica, sans-serif;.

However it is rendering the text in sans-serif instead of Arial. That suggests, that the font Arial is not available in my browser, but when I adjust the css right in the console and change the font-family to font-family: Arial I see the text in Arial, and I am sure that it's Arial because I'm comparing it next to an image I did through Photoshop that contains Arial text.

Why doesn't my browser render Arial even though it's the first option and instead renders sans-serif?

html { font-family: 'Arial'; } .other{ font-family: 'Arial, Helvetica, sans-serif'; } This text should be Arial. <b> Home Services Careers Feedback Privacy Policy Referral </b> <br> <span class="other">This text can be Arial sans-serif or Helvatica </span> <b class="other"> Home Services Careers Feedback Privacy Policy Referral </b>

• html
• css
• wordpress
• fonts

Share Improve this question Follow edited Jun 29, 2016 at 10:47 beerwin 10.3k66 gold badges4343 silver badges6060 bronze badges asked Jun 27, 2016 at 6:50 Naguib IhabNaguib Ihab 4,49688 gold badges5151 silver badges8686 bronze badges 6

• 1 I suspect something isn't what you think. Perhaps you could make a minimal reproducible example? – Alexander O'Mara Commented Jun 27, 2016 at 6:54
• @AlexanderO'Mara I was able to replicate it and have added it in the question. – Naguib Ihab Commented Jun 27, 2016 at 7:21
• Typo: font-family: 'Arial, Helvetica, sans-serif'; You don't quote the list, you quote individual font names, but that's only needed if they have have a space in the name itself. font-family: Arial, Helvetica, sans-serif; works fine. – Alexander O'Mara Commented Jun 27, 2016 at 7:23
• @AlexanderO'Mara actually in the fiddle that fixed it... so I guess that's what I need to modify by hardcoding it in wordpress. Thanks. – Naguib Ihab Commented Jun 27, 2016 at 7:25
• Why are you people giving me -s? – Naguib Ihab Commented Jun 27, 2016 at 8:57

| Show 1 more comment

1 Answer 1

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 3

It is, because you have added everything inside single quotes. The browser tries to search for 'Arial, Helvetica, sans-serif' but no font with such name exists, so it reverts to default, which is usually "Times New Roman", "Times", serif, disregarding what did you specify for the document earlier.

The correct definition should be:

.other{ font-family: "Arial", "Helvetica", sans-serif; }

Note that the font names are in quotes, each. The font types doesn't need to be specified in quotes and it has to be last in the list so it doesn't mess you up.

The browser looks for fonts in the order you specify them and applies the one it finds first. If no specific font is found, and the font type is specified, the browser will pick one from the visitor's system.

Share Improve this answer Follow edited Jun 27, 2016 at 7:51 answered Jun 27, 2016 at 7:46 beerwinbeerwin 10.3k66 gold badges4343 silver badges6060 bronze badges 2

• no idea, but you don't quote font family names unless they have special characters in them, so it's technically just font-family: Arial, Helvetica, sans-serif in this case. No quotes unless there are spaces in the name, or non-hyphen symbols. – Mike 'Pomax' Kamermans Commented Jun 27, 2016 at 15:24
• Went on the safe side and wanted to explain how the OP should have been proceeding, if he used quotes. – beerwin Commented Jun 29, 2016 at 8:05

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• wordpress
• fonts

or ask your own question.

• The Overflow Blog
• How AI apps are like Google Search
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Related

2700 How to make a div 100% height of the browser window 2549 How do I reduce the opacity of an element's background using CSS? 2461 Get the size of the screen, current web page and browser window 18 CSS: Is Helvetica the default 'sans-serif' font on Mac and Arial the default sans-serif font on Windows? 0 Validation Error: Value Error : font-family 'Neue' is not a font-family value : Helvetica 'Neue',Helvetica,Arial,sans-serif 1124 Make body have 100% of the browser height 0 Why is the rendered font on my website Arial when I have set font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif; 1 How do I get the same looking font in mobile as in pc browser? 0 Arial specified in CSS breaks site in IE9 1 google chrome font unreadable

Hot Network Questions

• Online Service Course in the era of ChatGPT
• Does theory ladenness mean I have to throw out science ... and my senses?
• QGIS labeling: Why do we need a primary key for the auxiliary storage?
• Movie about dirty federal agents
• Canada's Prime Minister has resigned; how do they select the new leader?
• Hardy's ratings of mathematicians
• FindPeaks for sharp and broad peak
• Why are so many problems linear and how would one solve nonlinear problems?
• A miniature Thermometer Sudoku (ThermoDoku)
• Is there a cause of action for intentionally destroying a sand castle someone else has built on a public beach?
• MAX3485 TTL to RS-485 Fake Chinese Modules. No output, wrong chip (Counterfeit?)
• How to Achieve a Realistic Concrete Texture in Blender?
• Make numbers 1-100 using 2,0,2,5
• Why did Herod want to know the time of appearance of the Star of Bethlehem?
• Is "Klassenarbeitsangst" a real word? Does it accord with general rules of compound noun formation?
• How many hours of daylight can a planet in an elliptical orbit receive?
• Image of the entire function
• Clearance for formation flight of some sort in US airspace
• What is this FreeDOS kernel loader found on the “W3x4NTFS” disk image?
• exploratory factor analysis, non-normal data
• Is sales tax determined by the state in which the SELLER is located, or the state in which the PURCHASER is located?
• How to do the opposite of shift in zsh?
• How to Modify 7447 IC Output to Improve 6 and 9 Display on a 7-Segment
• First instance of the use of immersion in a breathable liquid for high gee flight?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html